手写 Zustand：三十分钟带你搞懂状态管理库的主要原理

前言

React 状态管理库层出不穷。从 Redux、MobX 到 Recoil、Jotai、Zustand，每一个都号称能解决你的痛点。但在这么多选择里Zustand凭借极简的 API 和不到 1KB 的体积。在 GitHub 上狂揽 50k+ star，成为了当下最流行的轻量级状态管理方案。

// Zustand 有多简单？三行搞定全局状态 const useStore = create => ({ 说到count。0,increment: => set => ),}));

我一直觉得，真正理解一个工具。 不是看文档背 API，而是把它拆开看看里面到底是怎么转的。今天我们就从基础开始，一步一步手写一个 Zustand。

读完这篇文章。你会彻底搞懂三件事：

• 状态管理库怎么「存」状态
• 发布订阅模式怎么驱动 React 组件「响应式」更新
• create 函数和自定义 Hook 是怎么封装出来的

我们先把官方的 Zustand 放一边，从一个最简单的 store 开始写起。不过，

第一步先这方面，一个最简陋的 store

抛开所有概念。状态管理就是就三个操作——存、取、改.

// zustand2.js —— 最朴素的版本 export function createStore { let state = { count: 0 };const getState = => state;const setState = => { state = newState;}，return { getState,setState };}

来用一下