深入理解 React 的 useSyncExternalStore Hook
useSyncExternalStore 是一个 React 的自定义钩子，它用于在外部存储发生变化时，同步更新 React 函数组件的状态。这个钩子可以用来连接外部的、非React状态管理库，例如 Redux 或者 Zustand，使得组件能够在这些状态变化时进行重新渲染。
以下是一个简单的例子，展示如何使用 useSyncExternalStore 来同步外部状态：
import { useSyncExternalStore } from 'use-sync-external-store/react';
import { store } from './yourStore'; // 假设你有一个外部存储
function Component() {
const externalState = useSyncExternalStore(store.subscribe, store.getState);
return (
<div>
{/* 渲染 externalState */}
</div>
);
}在这个例子中，store 是一个包含 subscribe 和 getState 方法的对象，分别用于订阅变化和获取当前状态。useSyncExternalStore 钩子在 store 的状态发生变化时，会自动调用 getState 方法来更新 externalState，并且导致组件重新渲染。
评论已关闭