React/文档/上下文API

React 文档 - 上下文 API

React 上下文 API 提供了一种无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法。这使得跨组件传递信息变得更加简单和方便。

上下文 API 的使用

上下文 API 主要用于在组件树中共享一些数据，例如主题、语言设置等。

创建上下文 使用 React.createContext 创建一个上下文对象。
```
const ThemeContext = React.createContext();
```
使用 Provider 包裹组件树 使用 Provider 组件包裹需要共享数据的组件树，并传入值。
```
<ThemeContext.Provider value={{ theme: 'dark' }}>
  {/* 组件树 */}
</ThemeContext.Provider>
```

在组件中使用 Consumer 使用 useContext 钩子或 <ThemeContext.Consumer> 组件来访问上下文中的值。

import { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

function MyComponent() {
  const theme = useContext(ThemeContext);
  return <div style={{ color: theme === 'dark' ? 'white' : 'black' }}>Hello, World!</div>;
}

扩展阅读

更多关于 React 上下文 API 的信息，可以参考官方文档。