概念：

接收一个 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