Zustand 状态管理库学习

一. 基本介绍

Zustand 是 2021 年Star 增长最快的 React 状态管理库，最近同事强烈安利并在项目中使用，本文是一篇学习稿。

二. 使用方式

安装方式很简单：

npm install zustand # or yarn add zustand

基本使用方式如下，首先我们创建一个 store，zustand 会导出 create 函数，通过创建函数你可以创建一个 store并返回一个 hook，函数参数 set可以用于设置状态。

import create from 'zustand'
const useStore = create(set => ({
  bears: 0,
  increasePopulation: () => set(state => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 })
}))

之后你可以绑定自己的组件，使用这些状态以及状态管理函数，注意你不需要包裹 Store Provider。

function BearCounter() {
  const bears = useStore(state => state.bears)
  return <h1>{bears} around here ...</h1>
}
function Controls() {
  const increasePopulation = useStore(state => state.increasePopulation)
  return <button onClick={increasePopulation}>one up</button>
}

三. 特点

1. 小巧

Zustand 是一个非常小巧的状态管理库，Bundle Size 只有 945 B 。

2. 无需 Provider

3. Makes hooks the primary means of consuming state

让 hooks 回归消费状态的基础意义。

四. Seletors 选择器

你可以传入选择器来获取 Store 中的切片数据，如果依赖上下文的话，你可以用 useCallback 来保存选择器，避免重复计算，优化性能。

const fruit = useStore(useCallback(state => state.fruits[id], [id]))

如果选择器和上下文无关，你可以另外存储这个选择器。

const selector = state => state.berries
function Component() {
  const berries = useStore(selector)

五. 覆盖状态

set函数默认执行合并操作，第二个参数设置为 true ，可以执行替换操作，替换数仓中的值。

import omit from "lodash-es/omit"
const useStore = create(set => ({
  salmon: 1,
  tuna: 2,
  deleteEverything: () => set({ }, true), // clears the entire store, actions included
  deleteTuna: () => set(state => omit(state, ['tuna']), true)
}))

六. 在 action 中获取 state 的值

set 支持传入函数更新，第一个参数是 state，除此之外你还可以通过 get方法获取状态。

const useStore = create((set, get) => ({
  sound: "grunt",
  action: () => {
    const sound = get().sound
    // ...
  }
})

七. 结合 Redux devtools