简单解读zustand源码（一）

zustand作为一个非常轻量级的react状态管理库受到很多人的喜欢，而且zustand的源码非常精简（除了ts部分，详细原因维护者有一些讲解）

所以今天的简单解读一下zustand的源码，学习一下设计思路
看源码之前需要明确几件事情:

源码方面由于zustand的ts体操非常丑陋，所以主要看打包后的js，而不看ts实现，ts只会作为临时的类型参考
用法方面主要看js用法，而不看ts用法，ts由于类型推导有一些问题，如果想看为什么ts的用法和js的有区别，参考官方

从基本用法说起

官方给出的js基本用法如下

import { create } from 'zustand'


const useBearStore = create((set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
}))

function BearCounter() {
  const bears = useBearStore((state) => state.bears)
  return <h1>{bears} around here ...</h1>
}

function Controls() {
  const increasePopulation = useBearStore((state) => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

//我自己常用的方法
function BearCounter() {
  const {bears} = useBearStore()
  return <h1>{bears} around here ...</h1>
}

从上面可以到主要用法就是在ts文件里create一个具有操作方法的store，
而create接受一个函数，函数第一个参数为set
在使用上主要是直接引用store，挑选出自己需要使用的方法或者值

源码主要流程解析

我下载了4.3.7的npm包并且创建了一个仓库，有需要可以在这里看到我的完整笔记，笔记为英文，因为笔者未来打算同步写英文博客
首先打开esm/index.js文件，可以看到create被export出来，从这里开始读起

create方法

// start here , consider createState is passed to the func , another situation is for ts
const create = (createState) =>
  createState ? createImpl(createState) : createImpl;

上面的代码显示是否需要传入createState，实际上这里是给ts作为类型推导的（详情看明确部分），js使用中createState一定会传入，那么下面是createImpl的代码

createImpl方法

// this is what create(createState) returned
const createImpl = (createState) => {
  // some warning , pass
  if (
    process.env.NODE_ENV !== "production" &&
    typeof createState !== "function"
  ) {
    console.warn(
      "[DEPRECATED] Passing a vanilla store will be unsupported in a future version. Instead use `import { useStore } from 'zustand'`.",
    );
  }
  // if you pass a func , then pass the func to createStore, otherwise return createState
  // consider func is passed , because we always want to use set & get func in store func
  const api =
    typeof createState === "function" ? createStore(createState) : createState;
  const useBoundStore = (selector, equalityFn) =>
    // key to not use provider , this takes advantages of useSyncExternalStore of react
    // check out for more
    // https://react.dev/reference/react/useSyncExternalStore
    useStore(api, selector, equalityFn);
  // use assign the api method to useBoundStore
  Object.assign(useBoundStore, api);
  return useBoundStore;
};

首先代码先判断了在proc环境以及createState，并给出了一个warning，createState需要为一个函数，非函数参数会被未来废弃掉
然后来到了最重要的部分，下面定义了一个api，当我们传入createState为func类型时，createStore(createState)被执行，并被赋值给api。
createStore在esm/vanilla.js中

createStore方法

// this is the api in index.js , createState is a func that contains set & get
const createStore = (createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl;

还是有一层判断，所以这里判定createStoreImpl(createState)

createStoreImpl

const createStoreImpl = (createState) => {
  let state;
  const listeners = /* @__PURE__ */ new Set();
  // declare all useful funcs that createState would use : setState, getState , api
  // setState: partial means the part of storeObj , replace is a boolean that determine if you replace the whole store
  const setState = (partial, replace) => {
    // sometimes we pass a mutate func rather than a target obj
    const nextState = typeof partial === "function" ? partial(state) : partial;
    // whether nextState and state is same in memory address , often not same
    // if not same
    if (!Object.is(nextState, state)) {
      const previousState = state;
      // if replace is not provided & nextState is not an obj , then clone state and nextState to a new obj
      // if replace is not provided & nextState is an obj , then return nextState
      // change state to new one
      state = (replace != null ? replace : typeof nextState !== "object")
        ? nextState
        : Object.assign({}, state, nextState);
      // after the operation , exec listeners according to order
      listeners.forEach((listener) => listener(state, previousState));
    }
  };
  // just return current state
  const getState = () => state;
  // listeners could be added through subscribe
  // returned func could be used to unsubscribe
  const subscribe = (listener) => {
    listeners.add(listener);
    return () => listeners.delete(listener);
  };
  //clear all listeners
  const destroy = () => {
    if (process.env.NODE_ENV !== "production") {
      console.warn(
        "[DEPRECATED] The `destroy` method will be unsupported in a future version. Instead use unsubscribe function returned by subscribe. Everything will be garbage-collected if store is garbage-collected.",
      );
    }
    listeners.clear();
  };
  // return api obj
  const api = { setState, getState, subscribe, destroy };
  // initialize state
  state = createState(setState, getState, api);
  return api;
};

首先看createStoreImpl的变量定义，一共定义了变量:state,listeners,setState,getState,subscribe,destroy

state就是最终的state，里面包含了用户定义的所有变量
listeners是用户自定义的监听器
setState是更新变量方法
getState是获取变量方法
subscribe和destroy分别用来操作listeners

其中最重要的是setState

const setState = (partial, replace) => {
    // sometimes we pass a mutate func rather than a target obj
    const nextState = typeof partial === "function" ? partial(state) : partial;
    // whether nextState and state is same in memory address , often not same
    // if not same
    if (!Object.is(nextState, state)) {
      const previousState = state;
      // if replace is not provided & nextState is not an obj , then clone state and nextState to a new obj
      // if replace is not provided & nextState is an obj , then return nextState
      // change state to new one
      state = (replace != null ? replace : typeof nextState !== "object")
        ? nextState
        : Object.assign({}, state, nextState);
      // after the operation , exec listeners according to order
      listeners.forEach((listener) => listener(state, previousState));
    }
  };

首先setstate接受两个参数，一个是需要更新的变量，另一个是是否需要replace对象的boolean

函数首先判断是否partial是一个函数，如果是，那么执行这个函数，如果不是，直接返回partial，总之最后的nextstate是一个对象
判断是否nextstate和state是同一个对象，如果是，那么直接结束函数，state不变。但一般我们不会传入当前state，那么现在开始更新state
首先当没有传入replace时，并且nextstate不是对象时，创建一个新对象并把state和nextstate合并进去，如果nextstate是对象，那么直接吧nextstate赋值给state。
如果传入了replace，操作相同，判断条件不同
经过上面的赋值步骤之后，开始执行所有的listerners，函数结束

createStoreImpl最后定义了api，里面上面定义的四个方法：setState, getState, subscribe, destroy
并且定义state为createState(setState, getState, api)，这里是初始化state的步骤
然后返回api

让我们回到createImpl方法，现在我们知道api其实是具有四个方法的一个对象
下一步createImpl方法定义了useBoundStore方法，并返回了useStore的返回值，useStore实际上是调用了react的内置useSyncExternalStoreWithSelector方法，这个方法是专门用来给第三方库使用的，因为有了这个方法所以zustand不需要用context provider，详情请参阅react。

函数最后把api Object.assign给了useBoundStore
至此我们的store创建完成并且得到了useBoundStore
useBoundStore的类型为

export type UseBoundStore<S extends WithReact<ReadonlyStoreApi<unknown>>> = {
  (): ExtractState<S>
  <U>(
    selector: (state: ExtractState<S>) => U,
    equals?: (a: U, b: U) => boolean
  ): U
} & S

也就是说我们可以像官方推荐的一样，传入一个selector，也可以像我常用的一样，直接执行这个函数然后返回整个对象
下面提供一个官方使用的例子和流程对应

const useDogStore = create(() => ({ paw: true, snout: true, fur: true }))


// api that in createImpl
// Getting non-reactive fresh state
const paw = useDogStore.getState().paw
// Listening to all changes, fires synchronously on every change
const unsub1 = useDogStore.subscribe(console.log)
// Updating state, will trigger listeners
useDogStore.setState({ paw: false })
// Unsubscribe listeners
unsub1()

// You can of course use the hook as you always would
const Component = () => {
  const paw = useDogStore((state) => state.paw)
  ...