1. 犀牛前端部落首页
  2. 资讯杂谈

使用zustand管理React State

使用zustand管理React State

首先我们看一下zustand的官方介绍:

Small, fast and scaleable bearbones state-management solution. Has a comfy api based on hooks, that isn’t boilerplatey or opinionated, but still just enough to be explicit and flux-like.

使用例子:

import create from 'zustand'
//创建一个store
const [useStore] = create(set => ({
  count: 1,
  inc: () => set(state => ({ count: state.count + 1 })),
  dec: () => set(state => ({ count: state.count - 1 })),
}))

function Counter() {
  const { count, inc, dec } = useStore()//绑定到组件
  return (
    <>
      <h1>{count}</h1>
      <button onClick={inc}>up</button>
      <button onClick={dec}>down</button>
    </>
  )
}

使用npm/yarn安装

npm install zustand

更多使用方式:

github链接

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/2831.html

发表评论

登录后才能评论