当前位置: 首页 > news >正文

[React] Zustand状态管理库

文章目录

      • 1.Zustand介绍
      • 2.创建一个store
      • 3.使用方法
        • 3.1 获取状态
        • 3.2 更新状态
        • 3.3 访问存储状态
        • 3.4 处理异步数据
        • 3.5 在状态中访问和存储数组
        • 3.6 持续状态
      • 4.总结

1.Zustand介绍

状态管理一直是现代程序应用中的重要组成部分, Zustand使用 hooks 来管理状态无需样板代码。

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

2.创建一个store

import create from 'zustand'// define the store
const useStore = create(set => ({count: 0
}))export default useStore
  1. 若第二个参数不传或为 false 时, 新状态将会和create方法原来的返回值进行融合 (默认为false)。

  2. 若第二个值为 true 时, 新状态会覆盖原始状态。

  3. 可以利用这个特性清空 store。

3.使用方法

3.1 获取状态
import useStore from "./store";const count = useStore(state => state.count + 1)return (<div><h1>count: {count}</h1></div>);

在这里插入图片描述

3.2 更新状态
```js
import create from 'zustand'// define the store
const useStore = create(set => ({count: 0,increment: () => set(state => ({count: state.count + 1}))
}))export default useStore

使用:

import useStore from "./store";const inc = useStore(state => state.increment)return (<div><h3>count: {count}</h3><br/><button onClick={inc}>+1</button></div>
);

在这里插入图片描述

3.3 访问存储状态

当我们定义上面的状态时, 我们使用 set() 方法, 假设我们在一个程序里, 我们需要存储 其他地方 的值添加到我们的状态, 为此, 我们将使用 Zustand 提供的方法 get() 代替, 此方法允许多个状态使用相同的值。

在这里插入图片描述

const useStore = create((set,get) => ({count: 0,action: () => {// 使用 get()const getState= get().count// ...}
}));
3.4 处理异步数据

Zustand 让存储异步数据变得容易, 这里, 我们只需要发出 fetch 请求和 set() 方法来设置我们的状态值。

在这里插入图片描述

const useStore = create((set) => ({count: {},getData: async (data) => {const response = await fetch(data)set({ count: await response.json() })},
}))
const asyncInc = useAppStore(state => state.getData)

在这里插入图片描述

3.5 在状态中访问和存储数组
const useStore = create(set => ({fruits: ['apple', 'banana', 'orange'],addFruits: (fruit) => {set(state => ({fruits: [...state.fruits, fruit]}));}
}));

创建了一个 store 包含了 fruits state, 其中包含了一系列水果, 第二个参数是 addFruits , 接受一个参数 fruit 并运行一个函数来得到 fruits state 和 新增的 fruits, 第二个变量用于更新我们存储状态的值

 const fruits = useStore((state) => state.fruits);
const addFruits = useStore((state) => state.addFruits);
const inputRef = useRef();
const addFruit = () => {addFruits(inputRef.current.value);inputRef.current.value = "";
};
return (<div className="App"><h1>I have {fruits.length} fruits in my basket</h1><p>Add a new fruit</p><input ref={inputRef} /><button onClick={addFruit}>Add a fruit</button>{fruits.map((fruit) => (<p key={fruit}>{fruit}</p>))}</div>
);

在这里插入图片描述

3.6 持续状态

状态管理库的一个共同特点是持久化状态, 例如: 在有 form 的网站中, 你希望保存用户信息, 如果用户不小心刷新了页面, 你会丢失所有数据记录. 在我们的应用中, 刷新时, 添加到状态的数据会丢失。

Zustand 提供了持久化状态以防止数据丢失的功能, 这个功能, 我们将使用 Zustand 提供的名为 persist 的中间件, 该中间件通过 localStorage 来持久化来自应用程序的数据, 这样, 当我们刷新页面或者完全关闭页面时, 状态不会重置。

在这里插入图片描述

 import {persist} from "zustand/middleware"
// and modify our existing statelet store = (set) => ({fruits: ["apple", "banana", "orange"],addFruits: (fruit) => {set((state) => ({fruits: [...state.fruits, fruit],}));},
});
// persist the created state
store = persist(store, {name: "basket"})
// create the store
const useStore = create(store);

持久化了 store 的值, localStorage 的 key 设为 basket, 有了这个, 我们在刷新页面时不会丢失新增的数据, 永久保存(即: 在执行清除本地存储的操作之前, 状态保持不变)

在这里插入图片描述

4.总结

Zustand 是由 Jotai 和 React springs 的开发人员构建的快速且可扩展的状态管理解决方案。

Zustand是状态管理器和观察者模式的代表。

相关文章:

[React] Zustand状态管理库

文章目录 1.Zustand介绍2.创建一个store3.使用方法3.1 获取状态3.2 更新状态3.3 访问存储状态3.4 处理异步数据3.5 在状态中访问和存储数组3.6 持续状态 4.总结 1.Zustand介绍 状态管理一直是现代程序应用中的重要组成部分, Zustand使用 hooks 来管理状态无需样板代码。 更少…...

【ChatGPT】ChatGPT发展历史

更多优质文章请看底部&#xff1a;ChatGPT与日本首相交流核废水事件-精准Prompt... hello&#xff0c;我是小索奇&#xff0c;在AI日益庞大的环境下&#xff0c;接下来将为大家不断的ChatGPT学习 ChatGPT使用了 Transformer 结构&#xff0c;建立在 OpenAI的 GPT-3.5 大型语言模…...

分布式文件存储系统Minio实战

分布式文件系统应用场景 互联网海量非结构化数据的存储需求电商网站&#xff1a;海量商品图片视频网站&#xff1a;海量视频文件网盘 : 海量文件社交网站&#xff1a;海量图片 1. Minio介绍 MinIO 是一个基于Apache License v2.0开源协议的对象存储服务。它兼容亚马逊S3云存…...

【MySQL】MySQL 官方安装包形式

MySQL 官方提供3种包&#xff1a; 1. 源码包 mysql-5.7.42.tar.gz mysql-5.7.42-aarch64.tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.6/mysql-5.6.34.tar.gz http://dev.mysql.com/get/Downloads/MySQL-5.7/mysql-5.7.42.tar.gz需要用户根据自己的CPU架构选择对应的…...

使用sqlmap获取数据步骤

文章目录 1.使用sqlmap获取所有数据库2.使用sqlmap获取当前连接数据库3.使用sqlmap获取当前数据库下所有表名4.使用sqlmap获取当前数据库下某个表下所有列名5.使用sqlmap获取当前数据库下某个表下指定字段的数据6.测试当前用户是否是管理员7.使用burpsqlmap批量检测8.脱库命令9…...

[论文笔记]GLM

引言 今天带来论文GLM: General Language Model Pretraining with Autoregressive Blank Infilling的笔记。论文中文标题为 通用语言模型预训练与自回归填空。 有很多不同类型的预训练架构,包括自编码模型(BERT、RoBERTa、ALBERT)、自回归模型(GPT系列)以及编码器-解码器模型…...

漏洞扫描环境:win10系统用VMware Workstation打开虚拟机若干问题

win10系统用VMware Workstation打开虚拟机若干问题 一 .VMware打开虚拟机就蓝屏重启怎么解决&#xff1f;一. VMware打开虚拟机就蓝屏重启怎么解决&#xff1f;方法一&#xff1a;1、同时按下CTRLSHIFTESC打开任务管理器功能&#xff0c;之后依次点击-详细信息-性能后出现下列界…...

OpenCV实现模板匹配和霍夫线检测,霍夫圆检测

一&#xff0c;模板匹配 1.1代码实现 import cv2 as cv import numpy as np import matplotlib.pyplot as plt from pylab import mplmpl.rcParams[font.sans-serif] [SimHei]#图像和模板的读取 img cv.imread("cat.png") template cv.imread(r"E:\All_in\o…...

消息队列实现进程之间通信方式

1. snd 源代码 #include <myhead.h>#define ERR_MSG(msg) do{\fprintf(stderr,"__%d__:",__LINE__);\perror(msg);\ }while(0)typedef struct{ long msgtype; //消息类型char data[1024]; //消息正文 }Msg;#define SIZE sizeof(Msg)-sizeof(long)int main(i…...

用简单例子讲清楚webgl模板测试

文章目录 搭建简易的webgl环境绘制简单三角形&#xff08;不带stencilTest)绘制另一个三角形&#xff08;不带模板测试&#xff09;加入模板测试总结调参练习 搭建简易的webgl环境 一直以来&#xff0c;我只是想通过搭建纯webgl环境&#xff0c;进行开发&#xff0c;来清楚地了…...

区块链(8):p2p去中心化之websoket服务端实现业务逻辑

1 业务逻辑 例如 peer1和peer2之间相互通信 peer1通过onopen{ write(Mesage(QUERY_LATEST))} 向peer2发送消息“我要最新的区块”。 peer2通过onMessage收到消息,通过handleMessage方法对消息进行处理。 handleMessage根据消息类型进行处理 RESPONSE_BLOCKCHAIN:返回区块链…...

composer安装与设置

1、到官网下载 composer.phar。下载地址:Composer 2、将下载的composer.phar 复制到 composer 文件夹中 3、在composer文件夹中新建文件 composer.bat&#xff0c;内容为 php "%~dp0composer.phar" %* 5、设置环境变量的path&#xff0c;添加composer文件夹...

unordered_map/unordered_set的学习[unordered系列]

文章目录 1.老生常谈_遍历2.性能测试3.OJ训练3.1存在重复元素3.2两个数组的交集Ⅱ3.3两句话中的不常见单词3.4两个数组的交集3.5在长度2N的数组中找出重复N次的元素 1.老生常谈_遍历 #pragma once #define _CRT_SECURE_NO_WARNINGS #include <iostream> #include <l…...

C++位图—布隆过滤器

目录 位图概念位图应用 布隆过滤器简介布隆过滤器的优缺点布隆过滤器应用场景布隆过滤器实现布隆过滤器误判率分析 总结 位图概念 位图是一种数据结构&#xff0c;用于表示一组元素的存在或不存在&#xff0c;通常用于大规模数据集的快速查询。它基于一个位数组&#xff08;或位…...

SQL SELECT 语句进阶

之前探讨了SQL SELECT 语句的基础内容,包括语法、字段选择、记录限制和数据源指定。今天将进一步深入,探讨多表连接、过滤结果集和逻辑运算等高级主题,还有LIKE 模糊查询、ORDER BY 对结果集排序、运用聚合函数汇总结果以及 GROUP BY 子句与相关应用。 本文将继续使用《三国…...

Mac程序坞美化工具 uBar

uBar是一款为Mac用户设计的任务栏增强软件&#xff0c;它可以为您提供更高效和更个性化的任务管理体验。 以下是uBar的一些主要特点和功能&#xff1a; 更直观的任务管理&#xff1a;uBar改变了Mac上传统的任务栏设计&#xff0c;将所有打开的应用程序以类似于Windows任务栏的方…...

【数据结构】排序之插入排序和选择排序

&#x1f525;博客主页&#xff1a;小王又困了 &#x1f4da;系列专栏&#xff1a;数据结构 &#x1f31f;人之为学&#xff0c;不日近则日退 ❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、排序的概念及其分类 &#x1f4d2;1.1排序的概念 &#x1f4d2;1.2排序…...

6.html表单

HTML表单&#xff08;HTML form&#xff09;是网页中用于收集用户输入数据的一种方式。表单由多个表单元素组成&#xff0c;通常包括输入框&#xff0c;复选框&#xff0c;单选按钮&#xff0c;下拉列表和提交按钮等。 HTML表单元素的基本结构如下&#xff1a; <form acti…...

【python学习第11节:numpy】

文章目录 一&#xff0c;numpy&#xff08;上&#xff09;1.1基础概念1.2数组的属性1.3数组创建1.4 类型转换1.5ndarry基础运算&#xff08;上&#xff09;矢量化运算1.6拷贝和视图1.6.1完全不复制1.6.2视图或浅拷贝1.6.3深拷贝 1.7索引&#xff0c;切片和迭代1.7.1一维数组1.7…...

Eclipse 主网即将上线迎空投预期,Zepoch 节点或成受益者?

目前&#xff0c;Zepoch 节点空投页面中&#xff0c;模块化 Layer2 Rollup 项目 Eclipse 出现在其空投列表中。 配合近期 Eclipse 宣布了其将由 SVM 提供支持的 Layer2 主网架构&#xff0c;并将在今年年底上线主网的消息后&#xff0c;不免引发两点猜测&#xff1a;一个是 Ecl…...

便携激光云高仪:精确测量云底高度、云层厚度等关键参数

便携激光云高仪是一种用于测量云层高度、厚度及分布情况的气象观测设备&#xff0c;广泛应用于气象监测、航空安全、环境研究等领域。其便携式设计特别适合野外作业和临时观测需求。设备通过激光脉冲探测云底高度&#xff0c;并实时分析云层垂直结构&#xff0c;为气象预报、灾…...

XC6206-1.8V是什么?有哪些作用?

本文主要介绍XC6206-1.8V是什么&#xff1f;有哪些作用&#xff1f;XC6206-1.8V是一款超低功耗、高精度的固定输出低压差线性稳压器&#xff08;LDO&#xff09;&#xff0c;核心作用是把较高电压转换成稳定的1.8V输出&#xff0c;专门为电池供电和低功耗设备设计。图文来源&am…...

单片机通用按键处理模块设计与实现

单片机通用按键处理模块设计与实现1. 项目概述1.1 模块功能特性本按键处理模块为单片机系统提供了一套完整的按键事件处理解决方案&#xff0c;具有以下核心功能&#xff1a;基础按键检测&#xff1a;支持按下(PRESS)和释放(RELEASE)事件检测高级触发模式&#xff1a;长按触发(…...

论文AIGC检测率多少算正常?超标后怎么高效降AI率达标?

论文AIGC检测率多少算正常&#xff1f;超标后怎么高效降AI率达标&#xff1f; “我的论文AIGC率31%&#xff0c;这算高吗&#xff1f;”“学校要求低于多少&#xff1f;”“超标了怎么办&#xff1f;”——最近这类问题在各大毕业论文群里出现的频率越来越高。说实话我去年也是…...

终极MCP服务器指南:解锁AI智能决策的完整工具箱 [特殊字符]

终极MCP服务器指南&#xff1a;解锁AI智能决策的完整工具箱 &#x1f680; 【免费下载链接】servers Model Context Protocol Servers 项目地址: https://gitcode.com/GitHub_Trending/se/servers MCP服务器&#xff08;Model Context Protocol Servers&#xff09; 是现…...

PySide6商业项目避坑指南:从许可证验证到Qt Designer实战

PySide6商业项目避坑指南&#xff1a;从许可证合规到UI开发实战 当企业开发者选择PySide6作为桌面应用开发框架时&#xff0c;往往会被其商业友好的LGPL许可证所吸引。但真正落地到项目开发中&#xff0c;从法律合规到技术实现都存在诸多需要特别注意的细节。本文将深入剖析那些…...

# 发散创新:用 Rust实现一个轻量级游戏日引擎的核心调度机制 在现代游戏开发中,**高效的任务调度与资源管理**是性能

发散创新&#xff1a;用 Rust 实现一个轻量级游戏日引擎的核心调度机制 在现代游戏开发中&#xff0c;高效的任务调度与资源管理是性能瓶颈的关键所在。尤其是在“游戏日”这类强调多线程并行处理、实时响应的场景下&#xff0c;传统基于 C 或 Python 的方案往往因内存安全问题…...

工厂里EtherCAT从站模块坏了别慌!手把手教你用Startup list和CoE-online快速换新(附配置顺序避坑指南)

工厂EtherCAT从站模块更换实战指南&#xff1a;Startup list与CoE-online的高效应用 当生产线上的EtherCAT从站模块突然罢工&#xff0c;设备维护工程师往往面临两难选择&#xff1a;是临时在线修改参数快速恢复生产&#xff0c;还是彻底解决"即插即用"的配置难题&am…...

实战教学应用:基于快马平台开发生物繁殖课互动学习与测评系统

作为一名生物老师&#xff0c;我一直在寻找能够让学生更直观理解繁殖知识的教学工具。最近尝试用InsCode(快马)平台开发了一个互动学习系统&#xff0c;效果出乎意料的好。这个平台最棒的地方是&#xff0c;不需要复杂的服务器配置&#xff0c;就能把想法快速变成可实际使用的教…...

lingbot-depth-pretrain-vitl-14惊艳效果:RGB输入→INFERNO伪彩深度图动态生成演示

lingbot-depth-pretrain-vitl-14惊艳效果&#xff1a;RGB输入→INFERNO伪彩深度图动态生成演示 1. 模型概述 LingBot-Depth (Pretrained ViT-L/14) 是一款基于 DINOv2 ViT-Large/14 编码器的深度估计与补全模型&#xff0c;拥有 321M 参数。该模型采用创新的 Masked Depth Mo…...