useContext

基本
1
const value = useContext(MyContext)
Copied!
接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。
当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值。
因此调用了 useContext 的组件总会在 context 值变化时重新渲染。
useContext(MyContext) 相当于 class 组件中的 static contextType = MyContext 或者 <MyContext.Consumer>
示例
1
const themes = {
2
  light: {
3
    foreground: "#000000",
4
    background: "#eeeeee"
5
  },
6
  dark: {
7
    foreground: "#ffffff",
8
    background: "#222222"
9
  }
10
};
11
​
12
const ThemeContext = React.createContext(themes.light);
13
​
14
function App() {
15
  return (
16
    <ThemeContext.Provider value={themes.dark}>
17
      <Toolbar />
18
    </ThemeContext.Provider>
19
  );
20
}
21
​
22
function Toolbar(props) {
23
  return (
24
    <div>
25
      <ThemedButton />
26
    </div>
27
  );
28
}
29
​
30
function ThemedButton() {
31
  const theme = useContext(ThemeContext);
32
  return (
33
    <button style={{ background: theme.background, color: theme.foreground }}>
34
      I am styled by theme context!
35
    </button>
36
  );
37
}
Copied!

以前

useEffect

下一个

useReducer

最近更新 1yr ago

复制链接

内容

基本

示例