花了三天才終於結束useEffect(當然也是因為我就是很慢)，今天要來進入下一個Hook-useContext

用一句話解釋為什麼需要useContext的話，我會這麼說：
因為不想要用Props一直傳、一直傳、一直傳。

react的一大特色就是component，component可以輕易地拆分，讓一切組件化，但同時也是因為這個特點，不同的組件如果需要溝通，就需要透過Props來傳，那如果很多層組件要傳來傳去，就會像是這樣：

就，
也沒有不行。

但如果可以一站到底，略過中間的層層關卡，也挺好的，這就是useContext的功用了。

那就來看code吧，code是從W3SCHOOl取用的，網址在這裡。
一樣，其實可以先簡單的一眼掠過。

import { useState, createContext, useContext } from "react";
import ReactDOM from "react-dom/client";

const UserContext = createContext();

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

function Component2() {
  return (
    <>
      <h1>Component 2</h1>
      <Component3 />
    </>
  );
}

function Component3() {
  return (
    <>
      <h1>Component 3</h1>
      <Component4 />
    </>
  );
}

function Component4() {
  return (
    <>
      <h1>Component 4</h1>
      <Component5 />
    </>
  );
}

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Component1 />);

createContext()

首先，要先建立一下這個hook，用的是react的createContext()這個function。
一個小小的細節，如果你import的是React而不是createContext的話，要使用第二個寫法。

const UserContext = createContext();

const UserContext =React.createContext();

Provider

來看第一個component，我們先用useState來建立變數，接著return一些東西。
由於他是第一個傳遞變數出去的component，因此特別重要。
我們需要知道從她傳出去的，所以要加上Provider，並且表達一下，你要傳遞甚麼東西，value={user}。

function Component1() {
  const [user, setUser] = useState("Jesse Hall");

  return (
    <UserContext.Provider value={user}>
      <h1>{`Hello ${user}!`}</h1>
      <Component2 />
    </UserContext.Provider>
  );
}

然後，中間那些不需要user的component我們基本上就是可以忽略。
這就是UserContext的好處，我們不需要明明用不到user，卻要一直提他。

Consumer

最後，當我們又需要user的時候，就可以把它拿出來用。
從useContext(UserContext)提取user就可以用了！
(這個接收Provider的component就是Consumer，不過可以用useContext來取代)。

function Component5() {
  const user = useContext(UserContext);

  return (
    <>
      <h1>Component 5</h1>
      <h2>{`Hello ${user} again!`}</h2>
    </>
  );
}

那麼，我們就順利的自由自在的在組件之間傳值啦！