React 中 Context（上下文）介绍

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

历史文章

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

1.什么是 React Context？

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

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

2.Context 的组成部分

1.创建 Context

c 复制代码

const MyContext = React.createContext(defaultValue);

2.Provider 提供数据

c 复制代码

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

3.消费数据

在函数组件中使用 useContext

c 复制代码

const value = React.useContext(MyContext);

在类组件中用 MyContext.Consumer

c 复制代码

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>;
}

这里，ThemedButton 虽然是深层子组件，但能直接拿到 ThemeContext 提供的值 'dark'，不用从 App 逐层传递。

3.总结

Context 是 React 用来跨组件共享数据的方案

避免了手动逐层传递 props

适合共享主题、用户信息、表单状态等全局或半全局数据