這幾天學習了useContext，認為它的用法稍微有點困難，所以今天我想再多練習一天，useContext第三篇繼續記錄練習過程Q-Q

這邊要將 User1 Component 中的 useState資訊傳遞給 User5 的 Component 來使用
為了不讓中間層級的Components一層一層傳遞資料，要使用 useContext 來傳遞

在provider的 value 中可以放入在最高層管理的狀態，可以是一般常數、狀態、方法等等

import { useState, createContext, useContext } from "react";

const UserContext = createContext();

function User1() {
  const [user, setUser] = useState("User no1");

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

function User2() {
  return (
    <>
      <h1>User 2</h1>
      <User3 />
    </>
  );
}

function User3() {
  return (
    <>
      <h1>User 3</h1>
      <User4 />
    </>
  );
}

function User4() {
  return (
    <>
      <h1>User 4</h1>
      <User5 />
    </>
  );
}

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

  return (
    <>
      <h1>User 5</h1>
      <h2>{`Hello ${user} ！！！！`}</h2>
    </>
  );
}

什麼時候要用到 useContext
答案是不一定。根據情境不同來判斷是否需要使用，因為 context 有一個很大問題是每當它資料更新，底下所有子元件都會重新渲染。
所以比較常使用到的情境會是不常變動的值，例如：主色、login、權限（使用者狀態）、多國語系等等