跳到主要内容

认识

一、认识​

Zustand 是一个基于发布订阅模式实现的状态管理方案。通过 create 方法创建一个 Store,并在Store里定义我们需要维护的状态和改变状态的方法, create函数实际上返回了一个Hook，通过调用这个hook，我们就可以在组件中去订阅某个状态，或者获取改变某个状态的方法。不需要像是 Redux 用 context provider 将 store 传递下去，便可以让全域使用 Zustand 的状态。

二、工作流​

2.1 创建 Store​

在一个函数内部, 创建了 state 状态变量、listeners 订阅数组、以及 setState、getState、subscribe 等订阅模型必要的 API。其中, state、listeners 已闭包的形式, 保存在内存中, 便于多次调用该函数时其相互独立、互不影响。

setState: 通过 Object.is() 对比前后状态, 如果有变化, 遍历执行 listener 订阅函数, 告知 React 更新渲染。

subscribe: 将useSyncExternalStore传递的回调添加至 listeners , 并返回 unsubscribe 函数。

2.2 创建 Hooks​

通过 React 提供的基于 useSyncExternalStore 封装的 useSyncExternalStoreWithSelector Hooks 连接外部状态源与组件内部状态, 返回 useSyncExternalStore 的快照。

useSyncExternalStoreWithSelector 相对于 useSyncExternalStore, 支持传入 selector 与 isEqual 默认为 Object.is()。 可以自动支持记忆结果的 getSnapshot。 因为 getSnapshot 返回的是状态快照，用于检查订阅的值自上次渲染以来是否发生了变化，因此结果需要引用稳定。这意味着它要么需要是一个不可变的值，如字符串或数字，要么需要是一个缓存/记忆的对象。所以, useSyncExternalStoreWithSelector 把我们传入的 selector 和 store 的 getSnapshot 结合，封装组合成了一个自动缓存版的 getSnapshot 并传给 useSyncExternalStore。