【状态管理】zustand 中文文档，它来了！！！

最新推荐文章于 2025-10-23 11:48:51 发布

原创最新推荐文章于 2025-10-23 11:48:51 发布 · 5.9k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #reactjs #zustand #redux

前端开发进阶同时被 2 个专栏收录

33 篇文章

订阅专栏

经验

21 篇文章

订阅专栏

文章介绍了在React应用中，由于Context的全量重渲染问题，推荐使用zustand作为状态管理库。zustand遵循React的不可变更新原则，避免了像MobX那样直接修改状态，提供了更好的性能和简洁的API。安装和使用步骤也在React和Vue环境中分别给出。

如果有兴趣了解更多用法及 api ，点击此处解锁中文文档

前言

是不是觉得 Redux 很难用？想用 Context 代替，但是你知道吗，Context 也有个很大的缺点：

context value发生变化时，所有用到这个context的组件都会被重新渲染，即使 component 需要的 state 可能根本沒有变动。基于 context 维护的模块越多，影响范围越大, 某些情况下会导致页面明显卡顿。
另外，它依赖 Context Provider 包裹你的应用程序。

那么试试 zustand 吧，当然你可以选择 mobx，
zustand 与 mobx 最大的差别在于：

zustand 的状态更新遵循 react 思想，采用自然不可变更新, 而 mobx 类似 vue，基于数据劫持直接修改状态本身。
体现在开发层面最直观的差异就是：
- zustand 状态更新，新状态覆盖旧状态
```
state = {a: 1}

update(){
  stae = {a: 2} 
}
```
- mobx 状态更新，直接修改属性值
```
state = {a: 1}

update(){
  stae.a++
}
```

React 三部曲

Step 1: 安装

npm install zustand # or yarn add zustand

Step 2: Store 初始化

创建的 store 是一个 hook，你可以放任何东西到里面：基础变量，对象、函数，状态必须不可改变地更新，set 函数合并状态以实现状态更新。

import { create } from 'zustand'

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

Step 3: Store 绑定组件，就完成了!

可以在任何地方使用钩子，不需要提供 provider。
基于 selector 获取您的目标状态，组件将在状态更改时重新渲染。

选择目标状态：bears

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

更新目标状态：bears

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

Vue 三部曲

什么，你还想试试在 Vue 中使用？那么 Step1 与 Step2 基本一致，不同的是 Step3 (Store 绑定组件)：

Step 1: 安装

npm install zustand-vue # or yarn add zustand-vue

Step 2: Store 初始化

创建的 store 是一个 hook，你可以放任何东西到里面：基础变量，对象、函数，状态必须不可改变地更新，set 函数合并状态以实现状态更新。

import create from "zustand-vue";

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

export default useBearStore

Step 3: Store 绑定组件，就完成了!

基于 selector 获取您的目标状态，组件将在状态更改时重新渲染。

Store 绑定组件在 vue3 与 vue2 中有所不同。

<template>
  <div>store.bears: {{ bears }}</div>
  <button @click="increasePopulation">increasePopulation</button>
  <button @click="removeAllBears">removeAllBears</button>
</template>

<script>
import useBearStore from "./store";

const increasePopulation = useBearStore((state) => state.increasePopulation);
const removeAllBears = useBearStore((state) => state.removeAllBears);

export default {
  data() {
    return {
      store: useBearStore(),
      bears: useBearStore((state) => state.bears),
    };
  },
  methods: {
    increasePopulation,
    removeAllBears,
  },
};