当前位置：首页 > React

react如何同步

2026-02-11 13:42:07React

React 同步状态的常见方法

在 React 中实现状态同步通常涉及组件间数据共享或状态管理。以下是几种常见方案：

使用状态提升（Lifting State Up） 将共享状态提升到最近的共同父组件，通过 props 向下传递数据和回调函数。适用于简单组件树结构的状态共享。

使用 Context API 创建 Context 对象并通过 Provider 提供值，子组件通过 useContext 钩子或 Consumer 消费数据。适合跨多层级组件共享状态。

使用状态管理库 Redux 或 MobX 等库提供全局状态管理，通过 store 集中管理状态，组件通过连接器或钩子访问和更新状态。适用于复杂应用状态同步。

使用自定义 Hook 封装共享逻辑到自定义 Hook 中，多个组件调用同一 Hook 实现状态同步。适合复用状态逻辑但不涉及渲染的情况。

使用事件总线 通过自定义事件系统或第三方库（如 EventEmitter）实现组件间通信。适用于非父子关系的远距离组件通信。

代码示例

状态提升示例

function Parent() {
  const [count, setCount] = useState(0);
  return (
    <>
      <ChildA count={count} />
      <ChildB onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Context API 示例

const CountContext = createContext();

function App() {
  const [count, setCount] = useState(0);
  return (
    <CountContext.Provider value={{ count, setCount }}>
      <ComponentA />
      <ComponentB />
    </CountContext.Provider>
  );
}

function ComponentA() {
  const { count } = useContext(CountContext);
  return <div>{count}</div>;
}

Redux 示例

react如何同步

// store.js
const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

// Component.js
function Component() {
  const count = useSelector(state => state.counter.value);
  const dispatch = useDispatch();
  return (
    <button onClick={() => dispatch(increment())}>
      {count}
    </button>
  );
}