zustand_React 状态管理库

Web前端开发网

fly63.com

首页资源工具文章教程栏目

zustand

网站地址:https://zustand-demo.pmnd.rs/

GitHub:https://github.com/pmndrs/zustand

网站描述:React 状态管理库

访问官网

GitHub

Zustand是一个用于管理状态的现代react状态库。它提供了简洁、可扩展和高效的状态管理解决方案，使得在React应用中处理复杂的状态逻辑变得更加容易和直观。

zustand特点

更少的样板代码。
Zustand 只在 state 的值改变时渲染组件, 通常可以处理状态的改变而无需渲染代码。
状态管理通过简单定义的操作进行集中和更新, 在这方面和 Redux 类似, 但是又和 Redux 不太类似, Redux 开发必须创建 reducer、action、dispatch来处理状态, Zustand 让它变得更加容易。
使用 hooks 来管理 states, Hooks 在 react 中很流行, 因此是一个很受欢迎的状态管理库。
Zustand 使用简单使用和简单实现的代码。
通过消除使用 Context Provides 从而使代码更短、更易读。

使用方式

zustand是基于发布订阅模式实现的一个状态管理库，可以不局限于仅在react项目中使用，不过对react的支持是官方实现的，使用起来也非常简洁，使用示例如下

// 在js项目中使用，不需要类型
import { create } from "zustand";

const initStateCreateFunc = (set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
});

const useBearStore = create(initStateCreateFunc);

ts项目，需要类型提示

import { create } from "zustand";

interface BearState {
  bears: number;
  increase: (by: number) => void;
}

const initStateCreateFunc = (set) => ({
  bears: 0,
  increase: (by) => set((state) => ({ bears: state.bears + by })),
});

const useBearStore = create<BearState>()(initStateCreateFunc);

如上文代码，在调用create函数后，会生成一个useStore的 hook，这个 hook 基本的使用方式和redux的useSelector的一模一样

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

function Controls() {
  const increase = useBearStore((state) => state.increase);
  return <button onClick={increase}>one up</button>;
}

仅供个人学习参考/导航指引使用，具体请以第三方网站说明为准，本站不提供任何专业建议。如果地址失效或描述有误，请联系站长反馈～感谢您的理解与支持！

链接: https://fly63.com/nav/4146