状态管理神器 zustand 只需要23行代码!!!

67 阅读1分钟

image.png

// 创建存储实现的函数,接收一个创建状态的函数作为参数
const createStoreImpl = (createState) => {
  let state; // 声明状态变量
  const listeners = /* @__PURE__ */ new Set(); // 创建监听器集合,@__PURE__是给打包工具的提示,表示这个函数无副作用

  // 更新状态的函数,接收部分状态或状态更新函数和替换标志
  const setState = (partial, replace) => {
    // 确定新状态:如果partial是函数则调用它并传入当前状态,否则直接使用partial
    const nextState = typeof partial === "function" ? partial(state) : partial;
    
    // 只有当新状态与当前状态不同时才更新
    if (!Object.is(nextState, state)) {
      const previousState = state; // 保存旧状态
      
      // 决定如何更新状态:
      // 1. 如果replace为true,直接替换
      // 2. 如果新状态不是对象或为null,直接替换
      // 3. 否则,合并当前状态和新状态
      state = (replace != null ? replace : typeof nextState !== "object" || nextState === null) 
        ? nextState 
        : Object.assign({}, state, nextState);
      
      // 通知所有监听器状态已更新
      listeners.forEach((listener) => listener(state, previousState));
    }
  };
  
  // 获取当前状态的函数
  const getState = () => state;
  
  // 获取初始状态的函数
  const getInitialState = () => initialState;
  
  // 订阅状态变化的函数,返回取消订阅的函数
  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };
  
  // 创建API对象,包含所有方法
  const api = { setState, getState, getInitialState, subscribe };
  
  // 初始化状态,调用createState并传入API方法
  const initialState = state = createState(setState, getState, api);
  
  // 返回API对象
  return api;
};

// 创建存储的工厂函数,如果没有提供createState则返回createStoreImpl
const createStore = (createState) => createState ? createStoreImpl(createState) : createStoreImpl;

// 导出createStore函数
export { createStore };