zustand状态管理器使用汇总

1. 初步使用介绍

// 1. 安装zustand
npm install zustand// 2. 创建store使用
import { create } from "zustand";
export const useBearStore = create((set) => ({bears: 0, increasePopulation: () => set((state) => ({ bears: state.bears + 1 })), removeAllBears: () => set({ bears: 0 }),
}));// 3. 组件内使用
import {useBearStore} from './store/index.js';function App() {// 不建议的写法:(除非状态都要使用到,否则建议使用下方写法,理由是会一直触发渲染导致性能差)// const {bears, increasePopulation} = useBearStore();// 支持写法const bears = useBearStore(state => state.bears);const increasePopulation = useBearStore(state => state.increasePopulation);const handleClick = () => {increasePopulation();}return (<div className="App">{bears}<button onClick={handleClick}>按钮</button></div>);
}export default App;

2. zustand内get与set使用

// 1. store
import { create } from "zustand";
export const useBearStore = create((set, get) => ({bears: 0,count: 0,increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),increaseCount: () => set((state) => ({ count: state.count + 1 })),removeAllBears: () => set({ bears: 0 }),total: () => {// get()可以获取到state状态里的数据return get().bears + get().count}
}));// 2. 组件使用import { useBearStore } from './store/index.js';function App() {const bears = useBearStore(state => state.bears);const count = useBearStore(state => state.count);// 使用set使bears+1const increasePopulation = useBearStore(state => state.increasePopulation);// 使用set使count+1const increaseCount = useBearStore(state => state.increaseCount);// 使用get获取bears+countconst total = useBearStore(state => state.total);const handleClickBears = () => {increasePopulation();}const handleClickCount = () => {increaseCount();}return (<div className="App"><div>{bears}</div><div>{count}</div><button onClick={handleClickBears}>按钮bears</button><button onClick={handleClickCount}>按钮count</button>{/* 汇总 */}<div>{total()}</div></div>);
}export default App;

3. selector使用

// 1. 创建一个ts文件
import { StoreApi, UseBoundStore } from 'zustand'type WithSelectors<S> = S extends { getState: () => infer T }? S & { use: { [K in keyof T]: () => T[K] } }: neverconst createSelectors = <S extends UseBoundStore<StoreApi<object>>>(_store: S
) => {let store = _store as WithSelectors<typeof _store>store.use = {}for (let k of Object.keys(store.getState())) {;(store.use as any)[k] = () => store((s) => s[k as keyof typeof s])}return store
}export default createSelectors;// 2. store使用
import { create } from "zustand";
import createSelectors from './index.ts';// 在store内使用
export const useBearStore = createSelectors(create((set, get) => ({bears: 0,count: 0,increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),increaseCount: () => set((state) => ({ count: state.count + 1 })),removeAllBears: () => set({ bears: 0 }),total: () => {// get()可以获取到state状态里的数据return get().bears + get().count}
})));// 3. 组件内使用,提高性能
import { useBearStore } from './store/index.js';// count发生改变时这个组件才会渲染, 否则不会, 增加性能
function Child() {const count = useBearStore(state => state.count);return (<div><div>{count}</div><div>{Math.random()}</div></div>)
}// 单独在组件内使用这个selectore
function Some() {const { bears, count } = useBearStore();const increasePopulation = useBearStore.use.increasePopulation();const increaseCount = useBearStore.use.increaseCount();const handleClickBears = () => {increasePopulation();}const handleClickCount = () => {increaseCount();}return (<div className="App"><div>{bears}</div><div>{count}</div><button onClick={handleClickBears}>按钮bears</button><button onClick={handleClickCount}>按钮count</button></div>);
}// 一定要封装独立组件, 否则使用后也会重复渲染
function App() {return (<div className="App"><Some /><Child /></div>);
}export default App;

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

hadoop安装

简介 Hadoop是一个开源的分布式存储和计算框架&#xff0c;最初由Apache软件基金会开发。它的发展背景可以追溯到Google的MapReduce和Google File System&#xff08;GFS&#xff09;的论文&#xff0c;这两篇论文启发了Hadoop的设计。Hadoop的主要应用场景包括大数据存…

行业追踪,2023-11-30

自动复盘 2023-11-30 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…

MySQL数据库的备份与恢复

在管理MySQL数据库时&#xff0c;备份和恢复是保证数据安全和完整性的关键环节。本文将指导您如何有效地备份MySQL数据库&#xff0c;并在需要时进行数据恢复。 请注意&#xff0c;如果没有 mysql> 的标志&#xff0c;说明我们是在外面终端进行的操作 创建备份文件路径 在…

h5小游戏--2048

2048 经典2048小游戏&#xff0c;基于JS、Html5改写版 效果预览 点我下载源代码 下载代码解压后&#xff0c;双击index.html即可开始本游戏。 Game Rule 游戏规则 以下为游戏默认规则&#xff0c;若需要修改规则请修改代码。 移动箭头键来移动方块&#xff0c;当两个相同数…

flutter开发实战-readmore长文本展开和收缩控件

flutter开发实战-readmore长文本展开和收缩控件 当长文本展开和收缩控件&#xff0c;我们需要使用readmore来处理长文本展开和收缩&#xff0c;方便阅读 一、引入readmore 在工程的pubspec.yaml中引入插件 readmore: ^2.1.0ReadMoreText的属性如下 const ReadMoreText(this.…

Andrioid T 实现充电动画(2)

Andrioid T 实现充电动画&#xff08;2&#xff09; 以MTK平台为例&#xff0c;实现充电动画 效果图 资源包 修改文件清单 system/vendor/mediatek/proprietary/packages/apps/SystemUI/res/layout/prize_charge_layout.xmlsystem/vendor/mediatek/proprietary/packages/ap…

Bilateral Guided Upsampling

Abstract 我们提出了一种加速一大类图像处理算子的算法。给定低分辨率参考输入和输出对&#xff0c;我们通过拟合将输入映射到输出的局部曲线来对算子进行建模。然后&#xff0c;我们可以通过在全分辨率输入上评估这些低分辨率曲线来生成全分辨率输出。我们证明&#xff0c;这…

C# 文件帮助类(FileHelper)

引言 在研究程序反射的时候我们往往需要获取当前运行程序所引用的dll文件,按照传统的方式我们可以维护一个这样的列表,但是这样维护成本实在是太高,而且不利于团队合作开发,在高版本的.net 4.6.2之后官方出了专门的dll帮我们做这个事情Microsoft.Extensions.DependencyMod…

MNIST训练数字识别

文章目录 Keras搭建卷积网络训练模型详解全部代码 Keras搭建卷积网络训练模型详解 Keras里面自带了训练和测试数据集&#xff0c;我们要做的就是搭建Keras模块&#xff0c;并且确保训练集和测试集的数据和模块的参数相吻合导入Sequential 模型&#xff1a;在深度学习中&#x…

电商项目之Web实时消息推送(附源码)

文章目录 1 问题背景2 前言3 什么是消息推送4 短轮询5 长轮询5.1 demo代码 6 iframe流6.1 demo代码 7 SSE7.1 demo代码7.2 生产环境的应用 &#xff08;重要&#xff09; 8 MQTT 1 问题背景 扩宽自己的知识广度&#xff0c;研究一下web实时消息推送 2 前言 文章参考自Web 实时消…

【数值计算方法(黄明游)】矩阵特征值与特征向量的计算(三):Jacobi 旋转法【理论到程序】

文章目录 一、Jacobi 旋转法1. 基本思想2. 计算过程演示 二、Python实现迭代过程&#xff08;调试&#xff09; 矩阵的特征值&#xff08;eigenvalue&#xff09;和特征向量&#xff08;eigenvector&#xff09;在很多应用中都具有重要的数学和物理意义。Jacobi 旋转法是一种用…

LeetCode Hot100 438.找到字符串中所有字母异位词

题目&#xff1a; 给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 异位词 指由相同字母重排列形成的字符串&#xff08;包括相同的字符串&#xff09;。 代码&#xff1a; class Solution …

位图和布隆过滤器(C++)

位图和布隆过滤器 一、位图1. 引入2. 概念3. 代码实现setreset完整代码 4. 位图的应用 二、布隆过滤器1. 引入2. 概念3. 逻辑结构4. 特点5. 代码实现6. 布隆过滤器的应用 三、哈希切割 一、位图 1. 引入 当面对海量数据需要处理时&#xff0c;内存不足以加载这些数据&#xf…

The Sandbox 携手 Sandsoft,与 Nuqtah 合作推动沙特阿拉伯的 Web3 发展

新的合作伙伴关系将增强创作者的能力&#xff0c;促进区块链生态系统的包容性。 The Sandbox 及其合作伙伴 Sandsoft 是移动游戏开发商和发行商&#xff0c;也是 AAA 人才驱动的投资者&#xff0c;他们非常高兴地宣布与 Nuqtah 建立新的合作伙伴关系&#xff0c;Nuqtah 是中东和…

OSI模型及其主要协议?

OSI模型是一个开放式系统互联参考模型&#xff0c;该模型人为的定义了七层结构。 由下至上及其主要作用为&#xff1a; 物理层&#xff1a;OSI的物理层规定了通信端点之间的机械特性、电气特性、功能特性以及过程特性&#xff0c;该层为上层协议提供了一个传输数据的物理媒体…

numpy模块安装方法

https://www.bilibili.com/video/BV1qN411R7V2/?spm_id_from333.337.search-card.all.click&vd_sourcefb8dcae0aee3f1aab700c21099045395

Linux:Ubuntu系统安装软件

本次以安装vim为例 sudo apt-get remove vim //卸载vim sudo apt-get install vim //安装vim sudo apt-cache show vim //获取vim软件信息安装时间较长。 安装完成后&#xff0c;执行下第三条指令&#xff0c;测试下是否安装成功即可。

Metasploit框架(1), 简介, 主要模块, 目录, 基本命令, 入侵案例

Metasploit框架(1), 简介, 主要模块, 目录, 基本命令, 入侵案例 Metasploit是一款开源的 安全漏洞 检测工具&#xff0c;可以帮助安全和IT专业人士识别安全性问题&#xff0c;验证漏洞的缓解措施&#xff0c;并管理专家驱动的安全性进行评估&#xff0c;提供真正的 安全风险 情…

在gazebo里搭建一个livox mid360 + 惯导仿真平台测试 FAST-LIO2

在gazebo里搭建一个livox mid360 惯导仿真平台测试 FAST-LIO2 前言立方体平台加入 livox mid360 激光雷达加入IMU模块调整底盘大小 并设计调用接口测试 Fast-Lio2 前言 livox mid360 在官网一直没有货&#xff0c;在gazebo里可以仿真该雷达形式的点云。 但是其只发布雷达的数…

Spire.Office 8.11.2 for NET fix Crack

内容摘自来自互联网------或者SDK官方本身手册 Spire.Doc for .NET A professional Word .NET library designed to create, read, write, convert and print Word document files in any .NET ( C#, VB.NET, ASP.NET, .NET Core, Xamarin ) application with fast and high qu…