zustand状态管理源码解析（一）

最新推荐文章于 2024-09-19 13:55:13 发布

置顶

kanade_hu

最新推荐文章于 2024-09-19 13:55:13 发布

阅读量700

点赞数 1

分类专栏：前端分享会文章标签： react.js typescript 前端

本文链接：https://blog.csdn.net/weixin_37764929/article/details/125327150

版权

本文介绍了轻量级的状态管理库zustand，它提供了简洁的store使用方式，可脱离组件独立操作。文章详细解析了zustand的create过程，通过源码分析展示了createStore、useStore的工作原理，并绘制了执行流程图。最后，作者尝试手写了一个简易版的zustand，分为创建store和创建useStore两部分。

摘要由CSDN通过智能技术生成

关于react状态管理工具库有很多，比较出名的有redux、mobx，这两款工具库使用相对来说比较广泛，今天我们所要了解的是一个比较小而精美的状态管理工具库zustand，截止目前为止有17+的start，最主要的是这个库提供的store写法简单，不在像以往我们通过state、action、dispatch等等一系列繁琐的操作进行状态管理，同时也可以脱离组件使用，让我们一起读一读源码了解一下他的状态管理机制；

本次我们先从3.x版本解读，4.x版本作者还在rc阶段，等最终发布后我们在继续追加4.x版本的改动解析；

1、create创建store，与使用

这个工具库相对来说很简单，我们直接使用

import create from 'zustand'

interface BearStore {
  bears: number,
  increasePopulation: () => void,
  removeAllBears: () => void
}

const useBearStore = create<BearStore>(set => ({
  bears: 0,
  increasePopulation: () => set(state => {
    console.log('用于debug')
    return { bears: state.bears + 1 }
  }),
  removeAllBears: () => set({ bears: 0 })
}))

项目中的使用办法

import useBearStore from './BearStore'

const Home: React.FC = () => {
  const bearStore = useBearStore()
  return <div>
    内容信息
    <div>{ bearStore.bears }</div>
    <button onClick={bearStore.increasePopulation}>增加</button>
    <button onClick={bearStore.removeAllBears}>重置</button>
  </div>
}

在使用我们对于create函数的使用做一个详细的说明，我们解读一下源码对于create函数的描述

// 源码对于create函数的说明，
const create = (<T extends State>(
  createState: StateCreator<T, [], []> | undefined
) => {
   
  return createState ? createImpl(createState) : createImpl
}) as Create
// createState参数定义说明
export type StateCreator<
  T extends State,
  Mis extends [StoreMutatorIdentifier, unknown][] = [],
  Mos extends [StoreMutatorIdentifier, unknown][] = [],
  U = T
  > = ((
    setState: Get<Mutate<StoreApi<T>, Mis>, 'setState', undefined>,
    getState: Get<Mutate<StoreApi<T>, Mis>, 'getState', undefined>,
    store: Mutate<StoreApi<T>, Mis>,
    $$storeMutations: Mis
  ) => U