前言

介紹 useContext 前，我們必須先認識 Context。

Context 概念有點像是 React 的全域變數概念，像是使用者登入狀態、樣式等等。

useContext

根據官方文件寫道，它會接受一個 context object（React.createContext 的回傳值）並回傳該 context 目前的值。

context object ：

1. Provider：傳遞 value 值
2. Consumer：接受 value 值

const value = useContext();
const { Provider, Consumer } = value ; 

官網範例

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

使用時機和注意事項

• 因為 context 每當它資料更新時，底下所有子元件都會重新 re-render，所以他比較適合一些固定資料，如登入者資訊。
• useContext 的參數必需為 context object 自己：
  • 正確: useContext(MyContext)

參考資料

• Context
• [React Hook 筆記] useContext