Zustand初探

简介

Zustand（德文单词，意思是“状态”）是一个用于管理React应用状态的小型、轻量级库。与其他状态管理库相比（如Redux），Zustand更加简洁和直观，适合中小型应用或需求不那么复杂的项目。

Zustand的特点和优势：

简洁易用：Zustand API设计简洁，使得状态管理过程变得非常直观；
轻量级：Zustand的包体积非常小，不会显著增加应用的加载时间；
灵活：你可以根据需要创建全局状态或局部状态，不必按照特定的模式进行操作；
高效：Zustand在性能上很高效，只有在状态实际改变时才会触发组件的重新渲染。

基本使用

安装

npm install zustand

创建store

import create from 'zustand'

const useStore = create(set => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 }))
}));

在组件中使用store

import React from 'react';
import { useStore } from './path-to-your-store';

function Counter() {
  const { count, increase, decrease } = useStore();
  
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increase}>Increase</button>
      <button onClick={decrease}>Decrease</button>
    </div>
  );
}

export default Counter;

这样，你就可以在组件中轻松地读取和更新 Zustand 管理的状态了。

对比MobX

我们先来看下MobX的使用方式：

import { makeAutoObservable } from 'mobx';
import { observer } from 'mobx-react';

class CounterStore {
  count = 0;
  constructor() {
    makeAutoObservable(this);
  }
  increase() {
    this.count++;
  }
  decrease() {
    this.count--;
  }
}

const counterStore = new CounterStore();

const Counter = observer(() => {
  return (
    <div>
      <h1>{counterStore.count}</h1>
      <button onClick={() => counterStore.increase()}>Increase</button>
      <button onClick={() => counterStore.decrease()}>Decrease</button>
    </div>
  );
});

export default Counter;

我们可以注意到，在用到store的组件是需要用observer包起来的。mobx官方文档中推荐大家尽量使用小组件，因为observer组件会追踪它们使用的所有值，并且当它们中的任何一个改变时重新渲染。所以你的组件越小，它们需要重新渲染产生的变化则越小;这意味着用户界面的更多部分具备彼此独立渲染的可能性。

比起redux，mobx要快很多，同时mobx也有很多高级用法，功能强大。对于大型项目来说，使用mobx是一个很好的选择，如果是中小型项目，不妨用zustand作为项目的状态管理，其性能更出色，代码简单，也更容易上手。

最佳实践

在Typescript中的使用

在Typescript中使用zustand时，声明store的方式可能有一些差异。在js中我们可以使用create(...)来创建一个store；而ts中，则应该用create<T>()(...)这种方式，注意一下多出来的这个括号。

那代码也就变成下面这样：

import { create } from 'zustand'

interface CounterState {
  counter: number;
  increase: () => void;
  decrease: () => void;
}

const useStore = create<CounterState>()((set) => ({
  count: 0,
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 })),
}))

Daryl's Blog