React context机制跨层传递数据

在 React 中，Context 机制可以让数据在组件树中跨层传递，而无需通过每一层的组件逐层传递 props。这种方式非常适合全局状态管理或深层嵌套的组件树中的数据共享。

Context 使用步骤：

1. 创建 Context 对象。
2. 使用 Provider 提供数据。
3. 使用 Consumer 或 useContext 钩子消费数据。

1. 创建 Context

首先，使用 createContext 创建一个 Context 对象。

import React, { createContext } from 'react';

// 创建 Context 对象
const MyContext = createContext();

export default MyContext;

2. 创建 Provider 提供数据

Provider 是 Context 的提供者，它负责将数据传递给组件树中的所有消费组件。你可以在任何地方使用它，通常在顶层的父组件中使用。

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

function MyProvider({ children }) {
  const [sharedData, setSharedData] = useState('共享的数据');

  return (
    <MyContext.Provider value={{ sharedData, setSharedData }}>
      {children}
    </MyContext.Provider>
  );
}

export default MyProvider;

在上面的代码中：

• MyProvider 是一个高阶组件，它使用 MyContext.Provider 来将状态（sharedData 和 setSharedData）传递给其子组件。
• value 属性传递给 Provider 的内容将提供给所有使用 MyContext.Consumer 或 useContext 的组件。

3. 消费 Context 中的数据

有两种方式可以消费 Context 中的数据：useContext 钩子（推荐）和 Context.Consumer。

3.1 使用 useContext 钩子

useContext 是 React 提供的一个钩子，用来简化获取 Context 数据的操作。

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

function ChildComponent() {
  const { sharedData, setSharedData } = useContext(MyContext);

  const handleUpdate = () => {
    setSharedData('来自子组件的新数据');
  };

  return (
    <div>
      <h2>子组件</h2>
      <p>Context 中的数据: {sharedData}</p>
      <button onClick={handleUpdate}>更新 Context 数据</button>
    </div>
  );
}

export default ChildComponent;

在这个子组件中，useContext(MyContext) 用于获取 Context 提供的数据，sharedData 是共享的状态，而 setSharedData 用于更新它。

3.2 使用 Context.Consumer

Context.Consumer 是另一种访问 Context 数据的方式，适合类组件或无法使用钩子的场景。

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

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {({ sharedData, setSharedData }) => (
        <div>
          <h2>子组件</h2>
          <p>Context 中的数据: {sharedData}</p>
          <button onClick={() => setSharedData('来自子组件的新数据')}>
            更新 Context 数据
          </button>
        </div>
      )}
    </MyContext.Consumer>
  );
}

export default ChildComponent;

4. 父组件中的使用

最后，我们在顶层父组件中使用 MyProvider，来包裹所有需要访问 Context 的子组件。

import React from 'react';
import MyProvider from './MyProvider';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  return (
    <MyProvider>
      <h1>父组件</h1>
      <ChildComponent />
    </MyProvider>
  );
}

export default ParentComponent;

5. 总结

• Context 创建：通过 createContext 创建 Context 对象。
• Provider 提供数据：通过 Context.Provider 传递数据给子组件。
• Consumer 消费数据：通过 useContext 钩子或 Context.Consumer 来获取和使用共享的数据。

6. 完整结构

src/
├── MyContext.js         // 创建 Context
├── MyProvider.js        // 创建 Provider 组件
├── ChildComponent.js    // 消费 Context 数据
└── ParentComponent.js   // 使用 Provider 包裹需要的组件