使用 useSyncExternalStore 构建自定义存储

自定义存储库需要三样东西：一些状态、一个用于注册监听器的订阅方法，以及一个用于读取当前状态的 getSnapshot 方法。这就是 useSyncExternalStore 所需的完整契约。

将存储库保持得如此精简，可以使它与框架无关，因此同一个存储库既可以在 React 内部使用，也可以在 React 外部使用。

createStore 工厂接受一个初始值，并返回一个包含 getSnapshot、订阅方法和更新方法的对象。它在内部保存当前状态以及一组监听器回调。

这种工厂模式让您可以通过一个可复用函数创建多个相互独立的存储库。

更新操作改变状态时，会设置新值，然后调用每个已注册的监听器。这些监听器就是 React 通过订阅函数提供的回调。

调用这些回调会告诉 React 存储库发生了变化，促使它重新读取 getSnapshot，并重新渲染所有读取该存储库的组件。

组件通过调用 useSyncExternalStore，并传入存储库的订阅方法和 getSnapshot 方法，来读取存储库。该钩子返回当前值，并在值发生变化时重新渲染。

您可以将这套逻辑封装成 useStore 这样的自定义钩子，使组件每次只需调用一个函数，而不必自行连接这些钩子参数。

由于存储库是模块级对象，任何导入它的组件都会共享同一份状态，无需使用上下文提供者。您不需要包裹组件树，也不需要逐层传递属性。

这正是外部存储的重要吸引力之一：通过扁平的导入即使用模式共享全局状态，而不是构建提供者层级。

您可以创建多个小型存储库，分别管理状态的一个切片，而不是使用一个庞大的单体存储库。组件只订阅自己关注的状态切片。

这样可以分离关注点并减少重新渲染，因为一个切片发生变化时，读取另一个切片的组件完全不会受到影响。

Zustand 是一个流行的极简状态库，完全基于这种模式构建，并从第 4 版起在内部使用 useSyncExternalStore。它简洁的接口本质上是经过完善的 createStore，再加上一层选择器。

了解这种联系后，您就能更清楚地看待这类库：它们只是围绕同一基础原语构建的轻量、易用封装，而您也可以自行构建这个原语。

通过向 getSnapshot 传入一个只返回组件所使用状态部分的选择器，可以确保组件仅在该部分发生变化时重新渲染。

这要求选择器返回稳定的结果，因此请对派生值进行记忆化，以避免新引用导致的无限循环，同时仍将更新限定在相关切片内。

为了调试，您可以为存储附加标签并记录更新日志，或者与浏览器开发者工具集成，以便追踪哪个存储在何时发生了变化。

即使是在 update 中加入一个由开发标志控制的简单控制台日志，也能帮助您在构建存储时理解状态流转。

由于存储是普通的 JavaScript，您可以直接测试其逻辑：调用更新并断言 getSnapshot 返回新值，而无需渲染任何内容。

您也可以在 React 中测试它：渲染一个从存储读取数据的组件，并验证调用更新后是否发生重新渲染，从而同时覆盖存储及其集成。

请回顾自定义存储订阅方法所遵循的约定。

自定义存储需要状态、订阅和 getSnapshot。通过 createStore 工厂和一个通知监听器的更新函数，可以在无需提供者组件的情况下实现共享的全局状态，因为模块导入共享同一个实例。

请使用多个切片存储和选择器来限制重新渲染，并记住引用必须保持稳定。Zustand v4+ 正是基于这一模式构建的，而这种纯 JavaScript 存储在 React 内外都很容易测试。