如何使用上下文在 React 组件之间共享状态？

在 React 中，通过上下文（Context）可以实现在组件之间共享数据，避免将状态一层一层地传递下去的过程。本文将介绍如何使用上下文来实现组件之间的状态共享。

上下文的概念

上下文是 React 提供的一种跨越组件树的方式，用于在组件之间共享数据。上下文由 React.createContext 创建，返回一个 Provider 和 Consumer 组成的对象。

const MyContext = React.createContext(defaultValue);

其中，defaultValue 是在没有匹配到 Provider 时，Consumer 所读取的默认值。

使用上下文

1. 创建上下文

在需要共享数据的组件中，创建一个上下文。

// MyContext.js
import React from 'react';

const MyContext = React.createContext();

export default MyContext;

2. 提供数据

在组件树的父组件中，提供数据并将其包裹在 Provider 中。

// Parent.js
import React from 'react';
import MyContext from './MyContext';

function Parent() {
  const [value, setValue] = useState('default');

  return (
    <MyContext.Provider value={{ value, setValue }}>
      <Child />
    </MyContext.Provider>
  );
}

在 Provider 中设置的值可以是任何数据类型，如对象、函数等等。

3. 使用数据

在需要读取数据的组件中，使用 Consumer 订阅 Provider 中的数据。

// Child.js
import React from 'react';
import MyContext from './MyContext';

function Child() {
  return (
    <MyContext.Consumer>
      {({ value, setValue }) => (
        <div>
          <p>{value}</p>
          <button onClick={() => setValue('new value')}>Change Value</button>
        </div>
      )}
    </MyContext.Consumer>
  );
}

注意，在 Consumer 中，提供的参数是一个回调函数，该函数的参数是 Provider 中提供的值。该回调函数应该返回一个需要渲染的组件。

4. 使用 useContext Hook

从 React 16.8 开始，可以使用 useContext Hook 来更方便地读取上下文中的数据。

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

function Child() {
  const { value, setValue } = useContext(MyContext);

  return (
    <div>
      <p>{value}</p>
      <button onClick={() => setValue('new value')}>Change Value</button>
    </div>
  );
}

useContext Hook 接受一个上下文对象，并返回该上下文的值。

总结

上下文可以实现组件之间的状态共享，避免了将状态一层一层地传递的过程。使用上下文可以提高代码的可重用性和可维护性，但需要谨慎使用，以避免滥用上下文带来的混乱。