前言

介绍 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