React 中 Context（上下文）介绍

关注

原创最新推荐文章于 2026-08-01 08:23:22 发布 796 阅读 AI 写同款· GEO 优化 ›

react中context的使用详解先说一说context是干什么的：跨层级通信一般组件通信的方法都是通过props来传递，不过这种方法当有了第三级或往后孙孙组件的时候就显得比较繁琐。以及不好修改。这时我们可以使用context来管理这些数据，不管多少层级都能让想要使用这些数据的组件能拿到。还有别的方法，mobx或redux。这些可以自行了解说一下文件目录以及思路：创建index文件作为父组件，child1组件为子组件，child2为子子组件。同级下创建一个store.j... 阅读详情

在 React 中，Context（上下文）是一种用于在组件树中共享数据的机制。

历史文章

React Context API 用于在组件树中共享全局状态
 React -AppVarContext.Provider 提供者组件

1.什么是 React Context？

它允许你在组件树中，不通过 props 一层层传递的情况下，直接把数据传给任意深层的子组件。

解决了“逐层传递 props”导致的代码臃肿和维护困难的问题，也叫“props drilling”。

2.Context 的组成部分

1.创建 Context

const MyContext = React.createContext(defaultValue);

2.Provider 提供数据

<MyContext.Provider value={someValue}>
  <YourComponents />
</MyContext.Provider>

3.消费数据

在函数组件中使用 useContext

const value = React.useContext(MyContext);

在类组件中用 MyContext.Consumer

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

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

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

function ThemedButton() {
  const theme = React.useContext(ThemeContext);
  return <button style={{ background: theme === 'dark' ? 'black' : 'white' }}>按钮</button>;
}