跳到主要内容

介绍

bear.jpg

一个小巧，快速，可扩展的基础状态管理解决方案。 Zustand基于hooks的API使用起来非常舒适。 它既不繁琐也不固执己见， 但有足够的约定使其明确且类似于flux。

不要因为它可爱就忽视它，它有爪子！ 花了很多时间来处理常见的陷阱， 如令人头疼的僵尸子问题， React并发，以及 在混合渲染器之间的上下文丢失。 它可能是React领域中唯一正确处理所有这些问题的状态管理器。

你可以在这里试用一个实时演示。

安装​

Zustand可以在NPM上作为一个包使用：

npm install zustand

首先创建一个存储​

你的存储是一个钩子！ 你可以在其中放置任何东西：原始值，对象，函数。 set函数会_合并_状态。

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

然后绑定你的组件，就这样！​

你可以在任何地方使用这个钩子，无需提供者。 选择你的状态，当状态改变时， 消费组件将重新渲染。

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