当前位置：首页 > backend >正文

[React]实现一个类zustand公共状态库

backend 2025/7/27 22:15:43

前言

最新在’深入’学习react reRender机制时发现除了基本的setState触发reRender(props本质上也是setState后的reRender)，还有第三方库比如各大百花齐放神魔乱舞的公共状态库也能通知到react去reRender对应的ui。
于是在好奇心的驱使下去查看现代的公共状态库是怎么能不触发setState还可以通知react去更新页面，最终我发现了这个被我们大多数人忽略的hooks: useSyncExternalStore

通过阅读文档可以知道

useSyncExternalStore 是一个让你订阅外部 store 的 React Hook。

具体api使用方法之类的可以自行去看文档，简单来说就是：第三方库变化的时候能通知react告知它该更新页面了。
之前的redux之类的库实现应该是用的context,通过setState来触发reRender从而达到更新ui的目的，所以这类库都需要通过Provider来通知组件更新，而react 18新增的useSyncExternalStore 则可以通过更优雅的方式来达到这个效果，所以这也是react18以来这么多公共状态库出来的原因吧，百花齐放的时代。

能收获什么？

阅读本篇并不能让你手搓一个类似zustand这样的库出来，只是以最简洁的方式展现zustand的基础功能的实现。

开始

声明一个createStore函数，这个函数入参是initFn。同zustand的create形参，它是一个函数，接收一个set，
这个set用于更新createStore的state数据。对照zustand create createStore返回的是一个useStore对象，所以他们的类型应该是：

// 定义状态更新函数类型
type SetState<T> = (upater: Partial<T> | ((prev: T) => Partial<T>)) => void;
// createStreo形参类型：接收set 返回初始状态
type CreateStore<T> = (set: SetState<T>) => T;
// createStore返回的hooks类型
type UseStore<T> = <U>(selector: (state: T) => U) => U;

初始化initFn获取创建store的数据，创建一个Set数据用于触发set时通知react；

export function createStore<T>(initFn: CreateStore<T>): UseStore<T> {let state: T;const listeners = new Set<() => void>();const set: SetState<T> = (updater) => {const nextState = typeof updater === 'function' ? updater(state) : updater;state = {...state, ...nextState};listeners.forEach(l => l());}state = initFn(set);const useStore: UseStore<T> = (selector) => {const getSnapshot = () => selector(state);const subscribe = (callback: () => void) => {listeners.add(callback);return () => listeners.delete(callback);};return useSyncExternalStore(subscribe, getSnapshot);}return useStore;
}

以上就实现了zustand的基本功能，如何使用呢？
按照规范肯定是新建一个store用于保存公共状态了，新建一个useCounterStore来替代vite模板里的count setCount

import { createStore } from '../libs/createStore';export const useCounterStore = createStore<{count: number;inc: () => void;
}>((set) => {return {count: 0,inc: () => set((s) => ({ count: s.count + 1 }))}
})

ps：这里有没有大佬告诉我怎么来写ts让它自然推到类型而不是我手动写泛型的类型啊。

在App页面引入这个状态

import { useCounterStore } from './store'
...function App() {const count = useCounterStore((s) => s.count);const setCount = useCounterStore(s => s.inc)
}...<button onClick={() => setCount()}>count is {count}</button>