react18 provide 使用，跨层级组件传递数据

在 React 中，Context API 提供了一种无需手动通过 props 传递数据的方式，就可以让组件树中的任何层级的组件访问到某些数据的方法。Provider 是 Context API 的一部分，它允许你将值传递给整个组件树中的所有消费者（Consumer），而不需要在每个层级手动传递 props。

从 React 16.3 开始，Context 和 Provider 已经成为了 React 核心库的一部分，并且在 React 18 中继续得到支持和使用。以下是关于如何在 React 18 中使用 Context 和 Provider 的基本示例。

创建 Context

首先，你需要创建一个 Context 对象。这通常是在你的应用中定义的一个常量或变量。

import React, { createContext } from 'react';

// 创建一个 Context 对象
const MyContext = createContext(defaultValue); // defaultValue 是可选的

使用 Provider

接下来，你需要用 Provider 组件包裹你的组件树，以便将数据提供给子组件。

function App() {
  const [value, setValue] = React.useState('Initial value');

  return (
    <MyContext.Provider value={value}>
      {/* 子组件可以访问这里的 value */}
      <ChildComponent />
    </MyContext.Provider>
  );
}

在子组件中消费 Context

有几种方式可以在子组件中消费 Context：

使用 Context.Consumer

你可以直接在组件内部使用 Context.Consumer 来订阅 Context 的变化。

function ChildComponent() {
  return (
    <MyContext.Consumer>
      {value => /* 基于 context 值渲染 */ <div>{value}</div>}
    </MyContext.Consumer>
  );
}

使用 useContext Hook

如果你在函数组件中工作，可以使用 useContext Hook 来更简洁地消费 Context。

import React, { useContext } from 'react';

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

使用 contextType（仅限类组件）

对于类组件，你可以通过设置 static contextType 属性来消费 Context。

class ClassChildComponent extends React.Component {
  static contextType = MyContext;

  render() {
    const value = this.context;
    return <div>{value}</div>;
  }
}

示例代码

这里是一个完整的例子，展示了如何使用 Provider 和 Consumer 或者 useContext Hook 来共享数据。

import React, { createContext, useState, useContext } from 'react';

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

function ParentComponent() {
  const [message, setMessage] = useState('Hello from Parent!');

  return (
    // 使用 Provider 向下传递数据
    <MyContext.Provider value={{ message, setMessage }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  // 使用 useContext Hook 消费 Context
  const { message, setMessage } = useContext(MyContext);

  return (
    <div>
      <p>{message}</p>
      <button onClick={() => setMessage('Message updated in Child!')}>Update Message</button>
    </div>
  );
}

export default ParentComponent;

在这个例子中，ParentComponent 包含了一个状态 message，并通过 MyContext.Provider 将其传递给了 ChildComponent。ChildComponent 使用 useContext Hook 来读取并更新这个状态。

请注意，在 React 18 中，虽然 Context API 本身没有改变，但你可以结合新的特性如并发模式来优化用户体验。例如，当使用 Suspense 进行代码分割时，你可以利用 Context 来确保在整个应用中一致地提供数据。