React函数组件间非渲染式数据传递方法求助

1. React Context API #

Context是React内置的跨组件数据传递方案，不需要组件有父子渲染关系就能共享数据。

示例代码： #

// 1. 创建Context
const DataContext = React.createContext();

// 2. 在根组件或上层组件提供数据
function App() {
  const [data, setData] = useState('初始数据');
  return (
    <DataContext.Provider value={{ data, setData }}>
      <ComponentA />
      <ComponentB />
    </DataContext.Provider>
  );
}

// 3. 组件A修改数据
function ComponentA() {
  const { setData } = useContext(DataContext);
  return <button onClick={() => setData('更新后的数据')}>更新数据</button>;
}

// 4. 组件B获取数据（和A无渲染关系）
function ComponentB() {
  const { data } = useContext(DataContext);
  return <div>当前数据：{data}</div>;
}

只要组件在Context Provider的范围内，不管层级关系如何，都能直接获取或修改数据，不用渲染成子组件。

2. 轻量状态管理库（Zustand/Jotai） #

如果觉得Context写起来麻烦，这类轻量库更适合新手，不用包裹Provider，直接创建store就能跨组件共享数据。

Zustand示例： #

// 安装依赖后创建store
import create from 'zustand';

const useDataStore = create((set) => ({
  data: '初始值',
  updateData: (newVal) => set({ data: newVal })
}));

// 组件X读取数据
function ComponentX() {
  const data = useDataStore(state => state.data);
  return <div>{data}</div>;
}

// 组件Y修改数据
function ComponentY() {
  const updateData = useDataStore(state => state.updateData);
  return <button onClick={() => updateData('来自Y的数据')}>更新</button>;
}

两个组件完全独立，没有任何渲染关联，直接通过store同步数据，代码简洁易懂。

3. 自定义发布订阅模式 #

自己实现一个简单的事件总线，组件通过订阅、发布事件传递数据，完全脱离React组件树的限制。

示例代码： #

// 简易事件总线工具
const eventBus = {
  events: {},
  subscribe(event, callback) {
    this.events[event] = [...(this.events[event] || []), callback];
  },
  publish(event, data) {
    this.events[event]?.forEach(cb => cb(data));
  },
  unsubscribe(event, callback) {
    this.events[event] = this.events[event]?.filter(cb => cb !== callback);
  }
};

// 组件C订阅事件接收数据
function ComponentC() {
  const [receivedData, setReceivedData] = useState('');

  useEffect(() => {
    const handleData = (data) => setReceivedData(data);
    eventBus.subscribe('dataSend', handleData);
    // 卸载时取消订阅，避免内存泄漏
    return () => eventBus.unsubscribe('dataSend', handleData);
  }, []);

  return <div>收到的数据：{receivedData}</div>;
}

// 组件D发布事件发送数据
function ComponentD() {
  const send = () => eventBus.publish('dataSend', 'D发送的数据');
  return <button onClick={send}>发送数据</button>;
}

这种方式适合跨多个不相关组件传递数据，但要记得在组件卸载时取消订阅。

内容的提问来源于stack exchange，提问作者Sandeep