Zustand
  • 简体中文

      • 简介

      Zustand 徽标

      一个小巧、快速、可扩展的极简状态管理方案。 Zustand 基于 Hook 提供了一套舒适的 API。 它没有繁琐的样板代码，也不强加约定， 但保留了足够的约定，让用法明确且贴近 Flux。

      别因为它长得可爱就小看它，它可是有爪子的！ 我们投入了大量时间处理各种常见陷阱， 比如令人头疼的 僵尸 child 问题、 React 并发，以及混合渲染器之间的 上下文丢失。 它可能是 React 生态中唯一能把这些问题都处理好的状态管理器。

      你可以在这里试用在线演示。

      安装

      Zustand 以 NPM 包的形式提供：

      # NPM
npm install zustand
# Or, use any package manager of your choice.

      先创建一个 store

      你的 store 就是一个 Hook！ 你可以在里面放任何东西：原始值、对象、函数。 set 函数会合并状态。

      import { create } from 'zustand'

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

      然后绑定组件，就这么简单！

      你可以在任何地方使用这个 Hook，无需 provider。 选择你需要的状态，当该状态变化时， 消费该状态的组件就会重新渲染。

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

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