zustand

zustand简介

Zustand 是一个用于 JavaScript 的状态管理库，在 React 等框架中被广泛使用。

核心特点

• 简单易用：Zustand 有着简洁的 API。它使用钩子（hooks）的方式来访问和更新状态，这对于熟悉 React 钩子的开发者来说非常容易上手。
• 轻量级：它的代码体积相对较小，不会像一些大型状态管理库那样给项目带来过多的负担。这使得它在性能敏感的应用程序中也能很好地发挥作用。
• 可预测的状态更新：Zustand 遵循类似于 Redux 的单向数据流原则。状态的更新是通过显式地调用set函数来完成的，这使得状态的变化是可预测的。
• 支持异步操作：可以在set函数中轻松地处理异步操作。

快速使用

导入npm包：

pnpm install zustand

创建一个store：

import { create } from 'zustand'

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

使用store：

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>
}

与 Redux 对比

• 模板代码方面：Redux 通常需要编写大量的样板代码，如 action creators、reducers 和复杂的中间件配置。而 Zustand 相对简洁，不需要这些额外的模板代码，减少了开发的繁琐程度。
• 学习曲线方面：Redux 的概念比较复杂，包括 store、reducer、action 等多个概念需要理解和掌握。Zustand 的概念相对较少，主要围绕create函数和set操作，学习成本较低。
• 性能方面：在简单的场景下，Zustand 的性能表现良好，并且由于其轻量级的特点，在一些小型项目或者对性能要求较高的场景下可能更具优势。不过，Redux 也有自己的性能优化机制，如reselect库用于优化选择器等。

与 MobX 对比

• 响应式系统方面：MobX 基于响应式编程，通过自动追踪数据的变化来更新组件。Zustand 虽然也能有效地更新组件，但它的方式更偏向于手动触发状态更新。在一些复杂的场景下，Zustand 的更新方式可能更容易理解和调试。
• 代码侵入性方面：MobX 需要对数据进行特殊的装饰器（如@observable）标注，这可能会对代码结构产生一定的侵入性。Zustand 则没有这样的要求，它可以更自然地融入现有的代码风格。

参考

zustand官方网站