React v18 组件间数据共享：Context API 使用指南

在 React v18 中，你可以使用 React 的 Context API 来在不同的组件之间共享数据。以下是一种实现的示例：

创建一个名为 `DataContext.js` 的新文件，并在其中定义一个新的 Context：

import React from 'react';

const DataContext = React.createContext();

export default DataContext;

在 `App.js`（或者你的共同父组件）中，使用 `DataProvider` 包装你希望共享数据的组件：

import React from 'react';
import A from './A';
import B from './B';
import DataContext from './DataContext';

function App() {
  const dataList = [/* 从服务器获取的数据 */];

  return (
    <DataContext.Provider value={dataList}>
      <A />
      <B />
    </DataContext.Provider>
  );
}

export default App;

在 `A.js` 和 `B.js` 组件中，使用 `useContext` 钩子来访问共享的数据：

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

function A() {
  const dataList = useContext(DataContext);

  // 使用 dataList 数据进行渲染或处理其他逻辑
  return (
    <div>
      {/* 渲染 dataList 数据 */}
    </div>
  );
}

export default A;

// B.js 组件的代码与 A.js 类似

通过上述步骤，你可以在 `A` 和 `B` 组件中共享 `dataList` 数据，因为它们都位于 `DataProvider` 的上下文中。当 `dataList` 数据更新时，`A` 和 `B` 组件都会接收到最新的数据。