tutorials/react-context-api

React Context API 是一个用于在组件树之间共享状态的方法，它使得无需手动添加 prop，就能在组件间进行数据传递。以下是一些关于 React Context API 的教程。

基础概念

1. Context 提供者：一个组件，它通过 React.createContext() 创建了一个 Context 对象，并将其 value 属性传递给其子组件。
2. 消费者组件：任何使用 Context.Consumer 或 useContext() 钩子的组件，都可以访问到 Context 提供的值。

使用步骤

1. 创建 Context 对象

const MyContext = React.createContext(defaultValue);

2. 使用 Context 提供者包装组件树

<MyContext.Provider value={someValue}>
  {/* 子组件 */}
</MyContext.Provider>

3. 在消费者组件中访问 Context 值

<MyContext.Consumer>
  {value => (
    <div>{value}</div>
  )}
</MyContext.Consumer>

或使用 useContext 钩子

import React, { useContext } from 'react';
import MyContext from './MyContext';

const MyComponent = () => {
  const value = useContext(MyContext);
  return <div>{value}</div>;
};

图片示例

React Context API 示例

更多信息，请参考 React 官方文档。