说起 Zustand,很多使用 React 的小伙伴肯定不陌生
它是一个 React 状态管理库,类似于 Redux、Mobx
一起来看下 Zustand 的周下载量,大概在 250w,妥妥的第一梯队
再来看下 Zustand 的 github 标星,截止目前(2024-3-27)已经有 41.6k,妥妥的高赞仓库
如此优秀的 React 状态管理库不得不研究下。
顺便说一下,Zustand 的作者写了三个状态管理库,凭借一己之力,搅混 React 状态管理库的水。就是下面这哥们:
三个状态管理库,三种不同的思想,不得不说一句:真牛!!!,有兴趣的同学可以访问以下链接查看:
作者 Github: github.com/dai-shi
看下官网提供的例子:
导入 React 项目中:
1import { create } from 'zustand';
2
3type Store = {
4 count: number;
5 inc: () => void;
6};
7
8const useStore = create<Store>(set => ({
9 count: 1,
10 inc: () => set(state => ({ count: state.count + 1 })),
11}));
12
13export default useStore;
1import './App.css';
2import useStore from './store';
3
4function App() {
5
6 const { count, inc } = useStore();
7
8 return (
9 <div>
10 <h1>{count}</h1>
11 <button onClick={inc}>one up</button>
12 </div>
13 );
14}
15
16export default App;
查看下运行结果:
如果你不喜欢将方法和数据定义在一个对象中,zustand 还支持如下写法:
1import { create } from 'zustand';
2
3type Store = {
4 count: number;
5};
6
7
8export const useStore = create<Store>(set => ({
9 count: 1,
10}));
11
12
13export const inc = () => {
14 useStore.setState(state => ({ count: state.count + 1 }));
15};
16
17
18export const getStore = () => {
19 return useStore.getState();
20}
这意味着用户可以在 React 组件外获取和修改 store 的数据,这在有些情况下是非常有用的。
此外,Zustand 还支持中间价,官方提供了几个常用的中间件,我们以 persist
持久话缓存为例,看下使用方式:
1import { create } from 'zustand';
2import { persist } from 'zustand/middleware';
3
4type Store = {
5 count: number;
6};
7
8export const useStore = create(
9 persist<Store>(
10 () => ({
11 count: 1,
12 }),
13 {
14 name: 'zustand',
15 },
16 ),
17);
18
19export const inc = () => {
20 useStore.setState(state => ({ count: state.count + 1 }));
21};
22
看下效果:
以上就是 Zustand 的全部使用方法,是不是很简单,而这就是他迅速占领 React 状态管理第一梯队的原因;
Zustand 使用起来这么简单,那它的源码一定不简单吧!
非也,让我们一起来解开它神秘的面纱。
create
函数
首先创建 store 会先调用 Zustand 的 create
函数,就先从它入手(注意以下代码去掉了类型和一些提示类代码):
1const createImpl = (createState) => {
2
3 const api = typeof createState === 'function' ? createStore(createState) : createState
4
5
6 const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn)
7
8
9 Object.assign(useBoundStore, api)
10
11
12 return useBoundStore
13}
14
15export const create = (createState) => createImpl(createState);
api 是个什么东西?
useBoundStore 又是个什么东西?
有点云里雾里的感觉,重点是 函数 createStore
和 useStore
的执行结果。一个一个看:
createStore
函数
首先是 createStore
函数:
1const createStoreImpl = createState => {
2 let state;
3 const listeners = new Set();
4
5 const setState = (partial, replace) => {
6 const nextState = typeof partial === 'function' ? partial(state) : partial;
7 if (!Object.is(nextState, state)) {
8 const previousState = state;
9 state =
10 replace ?? (typeof nextState !== 'object' || nextState === null)
11 ? nextState
12 : Object.assign({}, state, nextState);
13 listeners.forEach(listener => listener(state, previousState));
14 }
15 };
16
17 const getState = () => state;
18
19 const getInitialState = () => initialState;
20
21 const subscribe = listener => {
22 listeners.add(listener);
23 return () => listeners.delete(listener);
24 };
25
26 const destroy = () => {
27 listeners.clear();
28 };
29
30 const api = { setState, getState, getInitialState, subscribe, destroy };
31
32 const initialState = (state = createState(setState, getState, api));
33
34 return api;
35};
36
37export const createStore = createState => createStoreImpl(createState);
分析下:
createStore
函数执行其实就是createStoreImpl
执行,最后返回了一个对象api
,api
中保存有setState, getState, getInitialState, subscribe, destroy
等函数setState
函数是主要的改变数据的函数,仔细看下。- 首先
nextState
用于获取变化后的值 - 之后使用
Object.is()
比较新旧state
,如果不相同则将新值与旧值执行替换或是合并操作(这里需要注意下:Zustand 支持设置replace
变量,true
表示 直接使用新值替换旧值,false
表示将新旧值合并,相同属性进行覆盖,新值中没有的属性进行保留,具体使用说明参见 Zustand状态合并) - 最后执行
listeners
集合中全部的listener
,这个listener
是个啥东西,现在还不清楚,咱们继续往下看
- 首先
getState
函数很简单,直接返回state
getInitialState
函数也很简单,返回初始的state
subscribe
函数 用于添加自定义的监听函数destroy
函数用于清除全部的监听函数- 最后调用用户初始传入的
createState
函数获取初始的state
值
useStore
函数
下面看下useStore
函数:
1import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
2const { useSyncExternalStoreWithSelector } = useSyncExternalStoreExports;
3
4const identity = arg => arg;
5
6export function useStore(api, selector = identity, equalityFn) {
7 const slice = useSyncExternalStoreWithSelector(
8 api.subscribe,
9 api.getState,
10 api.getServerState || api.getInitialState,
11 selector,
12 equalityFn,
13 );
14
15 return slice;
16}
useStore
很简单,就是调用了 useSyncExternalStoreWithSelector
函数,这个函数是 use-sync-external-store/shim/with-selector
包中的一个函数。
其实useSyncExternalStoreWithSelector
就是对 useSyncExternalStore
的一个包装,那useSyncExternalStore
是个啥东西:
useSyncExternalStore
useSyncExternalStore
是 React 18 中提供的一个新的 hook,主要是用于订阅和读取外部的值。
使用方法:
useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot?)
参数:
subscribe
:一个函数,接收一个单独的callback
参数并把它订阅到 store 上。当 store 发生改变,它应当调用被提供的callback
。这会导致组件重新渲染。subscribe 函数会返回清除订阅的函数。这也就解释了刚才我们的疑惑:listener
是个啥东西?listener
其实就是触发 React 重新渲染的函数以及我们自己定义的监听数据变化后做的副作用函数。getSnapshot
:一个函数,返回组件需要的 store 中的数据快照。在 store 不变的情况下,重复调用getSnapshot
必须返回同一个值。如果 store 改变,并且返回值也不同了(用Object.is
比较),React 就会重新渲染组件。- **可选 **
getServerSnapshot
:一个函数,返回 store 中数据的初始快照。它只会在服务端渲染时,以及在客户端进行服务端渲染内容的 hydration 时被用到。快照在服务端与客户端之间必须相同,它通常是从服务端序列化并传到客户端的。如果你忽略此参数,在服务端渲染这个组件会抛出一个错误。
返回值:
该 store 的当前快照,可以在你的渲染逻辑中使用。
具体参考 React 文档中 useSyncExternalStore 的介绍
useSyncExternalStoreWithSelector
是在useSyncExternalStore
的基础上添加了两个参数:
selector
:一个函数,用于获取state
中的部分数据,有了这个参数useSyncExternalStoreWithSelector
的返回值就可以根据selector
的结果来返回而不是每次都返回整个 store,相对灵活方便equalityFn
:数据比较方法,如果不希望使用Object.is
做数据对比,可以提供自己的对比函数
Zustand 也正是通过这个 hook 实现数据变化更新视图的。
回到 create
函数
函数 createStore
和 useStore
的内部原理我们都已经解释清楚,下面回到最开始的 create
函数:
1const createImpl = (createState) => {
2
3 const api = typeof createState === 'function' ? createStore(createState) : createState
4
5
6 const useBoundStore = (selector, equalityFn) => useStore(api, selector, equalityFn)
7
8
9 Object.assign(useBoundStore, api)
10
11
12 return useBoundStore
13}
14
15export const create = (createState) => createImpl(createState);
这下让我们再分析下:
api
就是存放着setState, getState, getInitialState, subscribe, destroy
函数的一个对象useBoundStore
是一个函数,它调用之后会根据传入的selector
返回对应的 store 数据,如果没有传入selector
,则会返回整个 storeObject.assign(useBoundStore, api)
将useBoundStore
函数和api
进行合并,目的就是方便用户使用如下方式修改和获取数据,即在 React 组件之外修改和获取数据
1export const inc = () => {
2 useStore.setState(state => ({ count: state.count + 1 }));
3};
4
5
6export const getStore = () => {
7 return useStore.getState();
8}
本文主要讲解了 Zustand 的使用和源码实现,原来,Zustand 不仅使用起来简单,源码更简单。
希望本文能帮助你更好的使用 Zustand。
我是克鲁,我们下期再见。
彩蛋:下期是不是得重点分析下_useSyncExternalStore_
的源码呢?如果你有这个需求,请在评论区留下你的足迹,让我知道有多少人有这个需求。