概念:
接收一个 context 对象(React.createContext
的返回值)并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider>
的 value
prop 决定。
当组件上层最近的 <MyContext.Provider>
更新时,该 Hook 会触发重渲染,并使用最新传递给 MyContext
provider 的 context value
值。即使祖先使用 React.memo
或 shouldComponentUpdate
,也会在组件本身使用 useContext
时重新渲染。
调用了 useContext
的组件总会在 context 值变化时重新渲染。如果重渲染组件的开销较大,你可以 通过使用 memoization 来优化。
用法
组件目录结构
组件结构
Home.js
import React from "react";
import { ThemeContext } from "../../contexts/theme";
import P from "../P";
const Home = () => {
return (
<div>
<ThemeContext.Provider value="dark">
<P />
</ThemeContext.Provider>
</div>
);
};
export default Home;
P.js
import React from "react";
import F from "./F";
const P = () => {
return (
<div>
<F />
</div>
);
};
export default P;
F.js
import React from "react";
import S from "./S";
const P = () => {
return (
<div>
<S />
</div>
);
};
export default F;
S.js
import React, { useContext } from "react";
import { ThemeContext } from "../contexts/theme";
const S = () => {
const theme = useContext(ThemeContext);
return <div>{theme}</div>;
};
export default S;
页面展示
页面显示dark
网友评论