useSyncExternalStore API 与参数

useSyncExternalStore 最多接受三个参数：订阅、getSnapshot，以及可选的 getServerSnapshot。它们共同告诉 React 如何监听变化，以及如何读取当前值。

理解每个参数都很重要，因为使用该钩子时，参数中的细小错误是最常见的问题来源。

订阅函数接收 React 提供的回调，并且必须将其注册到存储库中，使该回调在存储库发生变化时运行。它必须返回一个取消订阅函数，供 React 在清理时调用。

React 通过它得知何时需要重新读取快照，因此订阅函数只负责连接和拆除变化通知。

getSnapshot 返回存储库的当前值。React 会在渲染期间调用它来读取状态，并在收到通知后再次调用它，以检测值是否发生变化。

关键在于，当底层数据没有变化时，它必须返回引用稳定的结果：返回同一个引用，而不是每次都创建新对象。

可选的 getServerSnapshot 提供服务端渲染和初始水合过程中使用的值。之所以需要它，是因为仅供浏览器使用的 getSnapshot 可能依赖服务端不存在的接口。

提供它可以避免水合不匹配，因为它为服务端提供了合理的渲染值，并且与客户端最初生成的结果一致。

该钩子返回当前快照值，您可以像使用其他状态一样，直接在组件中使用它。当存储库发生变化时，React 会重新渲染，钩子也会返回更新后的快照。

从组件的角度看，这就像读取响应式状态一样，尽管真实数据源完全位于 React 之外。

getSnapshot 必须同步运行，并且只返回根据存储库当前状态得到的值。它不应执行异步工作，也不应针对相同的底层数据产生不同结果。

React 依赖反复调用它并比较结果，因此其中的任何非确定性行为或副作用都可能导致错误行为。

持有不可变状态的存储库让 getSnapshot 变得简单，因为当前状态对象的引用只会在数据变化时改变。返回该引用即可自动获得稳定的比较结果。

这就是不可变更新模式与该钩子非常契合的原因：数据相等意味着引用相同，而 React 会跳过不必要的重新渲染。

一个常见错误是在每次调用 getSnapshot 时都返回全新的对象或数组，例如在其中进行映射或筛选。React 每次都看到新引用，于是认为值发生了变化。

这会触发无限重新渲染或警告。解决方法是缓存派生值，并在源数据实际发生变化之前始终返回同一个引用。

为避免循环，请在 getSnapshot 外部计算派生数据，或将其记忆化，使该函数返回缓存的引用。许多库使用的选择器模式正是为了管理这种稳定性。

指导原则是：当存储库数据未改变时，对 getSnapshot 的两次调用必须返回完全相同的引用。

实际使用时，您需要编写一个能够添加和移除监听器的订阅函数，一个读取稳定当前值的 getSnapshot，以及在 SSR 场景下返回服务端安全值的 getServerSnapshot。

正确实现这三个参数后，该钩子就能以极少的样板代码，为您的外部存储提供一致且并发安全的读取。

确定 getSnapshot 的作用。

该钩子接受订阅、getSnapshot，以及可选的 getServerSnapshot。订阅函数负责连接监听器并返回取消订阅函数；getSnapshot 同步读取当前值，并且必须保持引用稳定；getServerSnapshot 提供适用于 SSR 的值。

经典陷阱是每次调用都返回新对象，这会导致无限循环。请缓存派生值，使未改变的数据产生相同的引用。