[React 进阶系列] useSyncExternalStore hook

useSyncExternalStore 是一个 React 的自定义钩子，它用于订阅外部存储的变化，并在其变化时更新组件。这个钩子可以用于与其他框架或库（如 Redux、MobX 或 Zustand）集成时，同步外部状态到组件。

以下是一个简单的使用 useSyncExternalStore 的例子：

import { useSyncExternalStore } from 'use-sync-external-store/react';
import { store } from './store'; // 假设有一个外部存储
 
function MyComponent() {
  const state = useSyncExternalStore(store.subscribe, store.getState);
 
  return (
    <div>
      <p>外部状态: {state}</p>
    </div>
  );
}

在这个例子中，store 是一个包含 subscribe 和 getState 方法的对象，分别用于订阅变化和获取当前状态。useSyncExternalStore 钩子会在 store 的状态变化时自动重新渲染 MyComponent，并使用最新的状态渲染它。

请注意，useSyncExternalStore 是一个实验性的 React 钩子，在未来可能会发生变化，因此在生产环境中使用前需要考虑对这个钩子的稳定性以及兼容性。