一个React的极简的状态管理工具 - zustand

说明

https://zustand-demo.pmnd.rs/

zustand是一个小型、快速且可扩展的精简状态管理解决方案。

示例

安装zustand

运行npm i zustand安装：

安装完成后，package.json文件中自动更新了依赖：

代码中使用

import { create } from "zustand"

// 创建store
// 函数参数必须返回一个对象，对象内部编写状态和方法
// set是用来修改状态的专有方法，必须调用来方法来修改数据
// set的语法1：参数是函数，需要用到老数据的场景使用，例如set((state) => ({ count: state.count + 1 }))
// set的语法2：参数直接是一个对象，不需要用到老的数据场景使用，例如set({ count: 100 })
const useStore = create((set) => {
  return {
    // 定义状态数据
    count: 10,
    // 定义修改状态数据的方法
    inc: () => {
      set((state) => ({ count: state.count + 1 }))
    }
  }
})

function App() {
  // 绑定store到组件
  // useStore()返回的是一个对象，对象中有数据和修改数据的方法
  const { count, inc } = useStore()
  return (
    <>
      <button onClick={inc}>{count}</button>
    </>
  )
}

export default App

初始展示：

每点击一次按钮，就加1：