react状态管理库---zustand

一个简单的,快速的状态管理解决方案,api设计基于函数式和hooks

安装:

npm install zustand 

基础使用

让我们实现一个非常简单的计数器案例完成我们的第一个store

1- 创建一个counterStore

create( ) 有三个参数:函数布尔值、XX
可以放任何东西:基本类型值、对象、函数。

  • 若第二个参数不传或为 false 时,新状态将会和create方法原来的返回值进行 融合 ;(默认为false)
  • 若第二个值为 true 时,新状态将会直接 覆盖 create方法原来的返回值。
  • 可以利用这个特性清空 store。
import create from 'zustand'

const useCounterStore = create((set) => ({
  // 数据
  count: 0,
  // 修改数据的方法
  increase: () => set(state => ({ count: state.count + 1 })),
  decrease: () => set(state => ({ count: state.count - 1 }))
}))


export default useCounterStore

2- 绑定到组件

import useCounterStore from './store'

const App = () => {
  const count = useCounterStore((state) => state.count)
  const decrease = useCounterStore((state) => state.increase)
  const increase = useCounterStore((state) => state.decrease)
  return (
    <div>
      <button onClick={decrease}>+</button>
      <span>{count}</span>
      <button onClick={increase}>-</button>
    </div>
  )
}

export default App

3- 使用方法

  • 获取所有状态
// 这样会导致该组件在每一个状态变化时都要进行更新。
const state = useStore();
  • 选择多个状态切片
// 获取方法与基本数据同理
const increasePopulation = useStore(state => state.increasePopulation)
const removeAllBears = useStore(state => state.removeAllBears)
  • 传递 shallow 构造一个内部要多个状态的对象。
import shallow from "zustand/shallow";

// 对象选取,当state.nuts或state.honey改变时,重新渲染组件。
const { name, age } = useStore(state => { name: state.name, age: state.age }, shallow)
// 数组选取,当state.nuts或state.honey改变时,重新渲染组件。
const [name, age] = useStore(state => [state.name, state.age], shallow);
// 映射选取,当state.treats在顺序、数量或对象键上发生变化时,重新渲染组件
const treats = useStore((state) => Object.keys(state.treats), shallow);
  • 通过 setState 可直接修改状态
import useStore from './index';
import shallow from 'zustand/shallow';
import { Button } from '@douyinfe/semi-ui'

export const test= () => {
	// 1、获取所有状态,通过点.使用
	const state = useStore()
	
	// 2、选择多个切片状态
	const bears = useStore(state => state.bears)
	const increasePopulation = useStore(state => state.increasePopulation)
	const removeAllBears = useStore(state => state.removeAllBears)
	
	// 3、使用 shallow 构造一个内部要多个状态的对象
	// const { name, age } = useStore(state => { name: state.name, age: state.age }, shallow)// 对象选取
	const [name, age] = useStore(state => [state.name, state.age], shallow);// 数组选取

	// 通过 setState 直接修改状态
	const subtractBears = () => {
		useStore.setState({ bears: bears - 1, age: age - 1})
	}

	return (<div>
		<h1>bears:{bears}</h1>
		<h1>bears:{state.bears}</h1>
		<h1>name:{name}</h1>
		<h1>age:{age}</h1>
		<Button onClick={increasePopulation}>加1</Button>
		<Button onClick={subtractBears}>减1</Button>
		<Button onClick={removeAllBears}>重置为0</Button>
	</div>)
};

通常建议用 useCallback 来记忆选择器。这将避免在每次渲染时进行不必要的计算。
利用 useCallback 甚至可以跳过普通 compare,而仅关心外部 id 值的变化。

const fruit = useStore(useCallback((state) => state.fruits[id], [id]));
异步支持

1- 创建异步action

import create from 'zustand'

const fetchApi = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(['vue', 'react'])
    }, 2000)
  })
}

const useListStore = create((set) => ({
  // 数据
  list: [],
  // 修改数据的方法
  fetchList: async () => {
    const res = await fetchApi()
    set({ list: res })
  }
}))


export default useListStore

2- 绑定组件

import { useEffect } from 'react'
import useListStore from './store'

const App = () => {
  const list = useListStore((state) => state.list)
  const fetchList = useListStore((state) => state.fetchList)
  useEffect(() => {
    fetchList()
  }, [])
  return (
    <div>
      {JSON.stringify(list)}
    </div>
  )
}

export default App
在没有 React 的情况下使用 zustand

zustands 的核心可以在不依赖 React 的情况下被导入和使用。
唯一的区别是,创建函数不返回 hook,而是返回一系列 api 函数。

import create from 'zustand/vanilla'

const store = create(() => ({ ... }))
const { getState, setState, subscribe, destroy } = store

甚至可以用 React 消费现有的 vanilla store。

import create from "zustand";
import vanillaStore from "./vanillaStore";

const useStore = create(vanillaStore);

注意修改set或get的中间件不应用于getState和setState。

增加调试

简单的调试我们可以安装一个 名称为 simple-zustand-devtools 的调试工具

1- 安装调试包

$ yarn add simple-zustand-devtools

2- 配置调试工具

import create from 'zustand'

// 导入核心方法
import { mountStoreDevtool } from 'simple-zustand-devtools'

const useStore = create((set) => ({}))

// 开发环境开启调试
if (process.env.NODE_ENV === 'development') {
  // 第一个参数为调试的store标识
  mountStoreDevtool('counterStore', useStore)
}


export default useStore

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/519150.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

某音乐平台歌曲信息逆向之参数寻找

如何逆向加密参数&#xff1a;某音乐平台歌曲信息逆向之webpack扣取-CSDN博客 参数构建 {"comm": {"cv": 4747474,"ct": 24,"format": "json","inCharset": "utf-8","outCharset": "ut…

从0到1实现RPC | 04 负载均衡和静态注册中心

一、Router的定义 Router路由用于预筛选&#xff0c;Dubbo有这样的设计&#xff0c;SpringCloud没有。 二、LoadBanlancer定义 负载均衡器&#xff1a;默认取第一个 当前支持随机和轮询两种负载均衡器。 随机&#xff1a;从所有provider中随机选择一个。 轮询&#xff1a;每…

ctf奇淫巧计

%00截断&#xff1a; %00在urldecode后就是0x00&#xff0c;一些函数诸如preg_match遇到0x00会直接停止。 String tartget_url req.getParameter("url");String pri tartget_url.substring(0, tartget_url.indexOf(":"));System.out.println(pri);if (p…

使用Python转换图片中的颜色

说明&#xff1a;最近在看梵高的画册&#xff0c;我手上的这本画册&#xff08;《文森特梵高》杨建飞 主编&#xff09;书中说&#xff0c;梵高用的颜料里有不耐久的合成颜料&#xff0c;原本的紫色褪成了我们现在所看到的灰蓝色。于是我想&#xff0c;能不能用程序将画中的颜色…

备战蓝桥杯---贡献法刷题

话不多说&#xff0c;直接看题&#xff1a; 什么是贡献法&#xff1f;这是一种数学思想&#xff0c;就是看每一个元素对总和的贡献。 1. 我们可以先枚举区间再统计次数&#xff0c;但这显然TLE。我们可以发现&#xff0c;每一个孤独的区间对应一个孤独的牛&#xff0c;因此我…

计组第三版书例题

基础知识过一下 存储器与CPU的连接主要通过数据总线、地址总线和控制总线实现。CPU首先向存储器发送地址信号&#xff0c;然后发出读写控制信号&#xff0c;最后在数据总线上进行数据的读写操作 。这种连接方式确保了CPU能够正确地访问和控制存储器中的数据。 https://blog.cs…

2024免费Mac电脑用户的系统清理和优化软件CleanMyMac

作为产品营销专家&#xff0c;对于各类产品的特性与优势有着深入的了解。CleanMyMac是一款针对Mac电脑用户的系统清理和优化软件&#xff0c;旨在帮助用户轻松管理、优化和保护Mac电脑。以下是关于CleanMyMac的详细介绍&#xff1a; CleanMyMac X2024全新版下载如下: https://…

蓝桥-时间显示

目录 题目链接 代码 题目链接 1.时间显示 - 蓝桥云课 (lanqiao.cn) 代码 #include <bits/stdc.h> using namespace std;int main() {long long x;cin>>x;int h,m,s;x x / 1000 % (3600*24); // 毫秒化秒&#xff0c;并且保留最后一天的时间h x / 3600; //求得…

使用pip install替代conda install将packet下载到anaconda虚拟环境

问题描述 使用conda install 下载 stable_baseline3出现问题 一番搜索下是Anaconda.org缺少源 解决方法 首先使用管理员权限打开 anaconda prompt 然后激活目标环境&#xff1a;conda activate env_name 接着使用&#xff1a;conda env list查看目标env的位置 如D:\anacon…

C语言进阶课程学习记录-第23课 - #error 和 #line 使用分析

C语言进阶课程学习记录-第23课 - #error 和 #line 使用分析 实验-#errer的使用演示cmd窗口实验-缺少#error实验-#line 1的使用实验-#line 1用于标记代码小结 本文学习自狄泰软件学院 唐佐林老师的 C语言进阶课程&#xff0c;图片全部来源于课程PPT&#xff0c;仅用于个人学习记…

MySQL介绍和安装

MySQL介绍和安装 文章目录 MySQL介绍和安装1.MySQL介绍2.MySQL安装2.1 主机初始化2.1.1 设置网卡名和ip地址2.1.2 配置镜像源2.1.3 关闭防火墙2.1.4 禁用SELinux2.1.5 设置时区 2.2 包安装2.2.1 Rocky和CentOS 安装 MySQL2.2.2 Ubuntu 安装 MySQL 2.3 二进制安装安装MySQL2.3.1…

基于SpringBoot+微信小程序的防诈骗平台

一、项目背景介绍&#xff1a; 社会背景随着互联网的高速发展&#xff0c;网络和手机的普及率也大大提高&#xff0c;这也衍生出一系列问题&#xff1a;用户信息泄露、不法分子电话诈骗等…现越来越多的老年人甚至年轻人经历过电信诈骗并被骗了大量金额。该产品正是基于这样的社…

CMOS漏极开路门

线与 通常CMOS门电路都有反相器作为输出缓冲电路。在实际工程中&#xff0c;为了方便常将两个门的输入端直接并联来实现与逻辑功能&#xff08;称为线与&#xff09;。如下图所示&#xff1a; 线与的弊端&#xff1a;当与电源VDD直接相连的PMOS管导通时&#xff0c;由于MOS管导…

arm开发板移植工具mkfs.ext4

文章目录 一、前言二、手动安装e2fsprogs1、下载源码包2、解压源码3、配置4、编译5、安装 三、移植四、验证五、总结 一、前言 在buildroot菜单中&#xff0c;可以通过勾选e2fsprogs工具来安装mkfs.ext4工具&#xff1a; Target packages -> Filesystem and flash utilit…

发布自己的github项目

git下载 git关网&#xff1a;https://git-scm.com/ 下载后是exe文件 git安装 除了选安装地址&#xff0c;其他都是下一步下一步傻瓜式安装 安装好之后随便一个地方右键多了两个东西 git gui here 和git bash here git测试配置及创建github项目 右键git bash here 测试…

C语言操作SQL数据库

1.打开/创建数据库的C语言接口 int sqlite3_open(const char *filename, sqlite3 **ppDb) 该例程打开一个指向 SQLite 数据库文件的连接&#xff0c;返回一个用于其他 SQLite 程序的数据库连接对象。 int sqlite3_close(sqlite3*) 该例程关闭之前调用 sqlite3_open() 打开的数据…

java(7)之跳转语句

1、break跳转语句 说到break其实也不是跳转&#xff0c;它更像是一个终结语句&#xff0c;常用于在循环语句需要停止出现例如 while&#xff08;&#xff09;{ if&#xff08;&#xff09;{ break&#xff1b; }} 这样的形式或者 switch&#xff08;&#xff09;{ case…

水离子雾化壁炉如何实现火焰的虚实变化?

水离子雾化壁炉通过调节水雾的密度和电子控制器的设置来实现火焰的虚实变化。具体实现方法如下&#xff1a; 调节水雾密度&#xff1a; 超声波振动器可以调节水分子的雾化效果&#xff0c;从而控制水雾的密度。增加水雾的密度会使火焰看起来更实&#xff0c;而减少水雾的密度则…

Pytoch安装记录

使用pycharm 1、CUDA的安装 官网&#xff1a;CUDA Toolkit Archive | NVIDIA Developer 选择对应的版本 选择对应的版本进行下载&#xff1a; 有3个多G cuda的安装需要注意&#xff0c;如果没有安装vs&#xff0c;则需要选择自定义安装&#xff0c;在自定义的安装中取消 安…

HTML常用标签-最基础的标签

从本篇开始&#xff0c;我们围绕HTML原生标签开始&#xff0c;围绕整个前端三剑客进行&#xff0c;将进行一个大致的介绍和案例展示&#xff0c;没有啥技术含量&#xff0c;只是把学习前端的时候&#xff0c;案例全部展示出来&#xff0c;作为一个实时记录&#xff0c;或者说回…