当前位置：首页 > React

react如何同步数据

2026-03-31 09:14:12React

React 同步数据的常用方法

状态提升（Lifting State Up）
将共享状态提升到最近的共同父组件中，通过 props 向下传递数据，子组件通过回调函数更新父组件状态。适用于父子或兄弟组件间的数据同步。

使用 Context API
创建全局上下文，通过 Provider 提供数据，子组件通过 useContext 或 Consumer 消费数据。适合跨多层级组件同步数据。

react如何同步数据

const DataContext = React.createContext();

function App() {
  const [data, setData] = useState({});
  return (
    <DataContext.Provider value={{ data, setData }}>
      <ChildComponent />
    </DataContext.Provider>
  );
}

function ChildComponent() {
  const { data, setData } = useContext(DataContext);
  // 使用 data 和 setData
}

状态管理库（Redux/Zustand）
通过集中式存储管理全局状态，组件通过 dispatch 更新状态或 selector 获取状态。适合复杂应用或大量跨组件数据同步。

react如何同步数据

自定义 Hook
封装共享逻辑到自定义 Hook 中，多个组件调用同一 Hook 实现数据同步。例如封装数据获取和缓存逻辑。

function useSyncData() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetchData().then(setData);
  }, []);
  return data;
}

// 不同组件调用同一 Hook
function ComponentA() { const data = useSyncData(); }
function ComponentB() { const data = useSyncData(); }

事件总线（Event Emitter）
通过第三方库（如 events）或自定义事件系统，实现组件间发布/订阅模式的数据同步。适用于松散耦合的组件通信。

import { EventEmitter } from 'events';
const emitter = new EventEmitter();

// 发布事件
emitter.emit('dataUpdate', newData);

// 订阅事件
useEffect(() => {
  const handler = (data) => console.log(data);
  emitter.on('dataUpdate', handler);
  return () => emitter.off('dataUpdate', handler);
}, []);