30行代码手写React状态管理库：微型zustand实现指南
前言：为什么我们需要zustand？
在React状态管理领域，zustand以极简的API和出色的性能脱颖而出。今天我们将揭开zustand的神秘面纱，用仅仅30行代码实现其核心功能。这个微型实现不仅保留了zustand的精髓，更是理解现代React状态管理机制的绝佳案例。
一、核心代码实现
import { useSyncExternalStore } from 'react';
// 状态存储工厂函数
function createStore(createState) {
let state;
const listeners = [];
const api = {
getState: () => state,
setState: (partial) => {
const newState = typeof partial === 'function'
? partial(state)
: partial;
state = Object.assign({}, state, newState);
listeners.forEach((listener) => listener());
},
subscribe: (listener) => {
listeners.push(listener);
return () => listeners.splice(listeners.indexOf(listener), 1);
},
};
state = createState(api.setState, api.getState, api.subscribe);
return api;
}
// React Hook绑定
function useStore(store, selector) {
return useSyncExternalStore(
store.subscribe,
() => selector(store.getState())
);
}
// 创建Store的快捷方法
export function create(createState) {
const store = createStore(createState);
return (selector) => useStore(store, selector);
}
二、实现原理剖析
1. 状态存储核心（createStore）
-
状态容器：通过闭包保存state变量
-
监听队列：使用数组维护订阅者列表
-
API对象：
- getState：直接返回当前状态
- setState：支持函数式更新，自动合并状态
- subscribe：管理订阅关系，返回取消订阅函数
2. React集成层（useStore）
- useSyncExternalStore：React 18新特性，完美桥接外部存储
- 选择器模式：通过selector函数实现精准更新
- 自动订阅：组件挂载时注册，卸载时自动清理
3. 创建模式优化（create）
- 工厂函数封装：简化Store创建流程
- 绑定Hook：返回可直接使用的React Hook
四、使用示例
// 创建store
const useCounterStore = create((set) => ({
count: 0,
increment: () => set(state => ({ count: state.count + 1 })),
reset: () => set({ count: 0 })
}));
// 在组件中使用
function Counter() {
const count = useCounterStore(s => s.count);
const increment = useCounterStore(s => s.increment);
return (
<div>
<span>{count}</span>
<button onClick={increment}>+</button>
</div>
);
}
六、扩展思考
- 如何添加中间件系统？
- 怎样实现状态持久化？
- 异步action如何处理？
- 如何支持Immer简化不可变更新？
结语
这个微型实现虽然省略了生产级库的诸多优化，但完整呈现了现代React状态管理库的核心架构。理解这个实现后，读者可以更好地使用zustand等成熟库，也具备了开发定制化状态管理方案的能力。状态管理没有银弹，理解底层原理才能做出最适合的技术选型。
