学习 zustand
学习 zustand
- https://github.com/pmndrs/zustand
- 告别繁杂的状态管理:Zustand 的简洁之道
- Zustand 状态库:轻便、简洁、强大的 React 状态管理工具
- 关于 zustand 的一些最佳实践
代码库 https://gitee.com/nian_zuo_chen/learnrect/tree/master/zustand
安装
npm install zustand
常用
create创建一个storeset函数修改store内容get函数,获取当前store中内容store.getState()静态获取当前store的所有内容store.subscribe(listener)订阅store变更,任意一个值变更,都会执行listeneruseShallow可以开启浅比较,对象属性变化不触发
中间件
subscribeWithSelector在创建store时候增加,允许订阅的时候增加选择器,来限制监听的范围listener中返回的数据和选择器选择的内容一致。devtools在创建store时候增加,结合redux-dev-tools浏览器插件可以查看 store 变化- 处理持久化,
persist开启持久化,createJSONStorage使用JSON.stringify和JSON.parse把值设置为JSON字符串进行存取
疑问
-
zustand.set的返回值直接覆盖全部 state 还是做数据合并到 state 中?
由第二个参数控制,默认是 false 标识数据合并,当返回 true 时候,是直接覆盖。 -
当一次从
store中获取多个数据时候,建议使用zustand/react/shallow有啥用?
可以进行浅比较,避免没必要的渲染,和所有的浅比较一样,也会引入数据变化无感知的困惑,可以结合devtools来检查 -
对比
UpdateObj.tsx、UpdateObj2.tsx和ShallowEqual.tsx中获取store数据的方式,为什么只有UpdateObj.tsx可以监听到变化?UpdateObj.tsx、UpdateObj2.tsx都没有使用useShallow
但是UpdateObj2.tsx中(state) => stat.user每次返回的都是store中的user,所以对组件而言路径地址没变,所以不触发刷新。
而UpdateObj.tsx中(state) => ({user: stat.user})每次返回的都是一个新的{user: xxx}对象,地址一直在变,所以触发刷新UpdateObj.tsx和ShallowEqual.tsx获取数据一样,每次都返回一个新的{user: xxx}对象,但是useShallow内的shallow算法是Object.keys一致,以及第一层的obj[key]的值一致(使用Object.is比较),就算做未变更,所以不触发刷新。在这两个组件中{user: xxx}虽然是两个对象,但是它们kyes一样都是["user"],然后指向的都是stroe.user这个地址一致,所以算作未变化。这要小心使用呀。shallow.ts 源码
相关文章:
学习 zustand
学习 zustand https://github.com/pmndrs/zustand告别繁杂的状态管理:Zustand 的简洁之道Zustand 状态库:轻便、简洁、强大的 React 状态管理工具关于 zustand 的一些最佳实践 代码库 https://gitee.com/nian_zuo_chen/learnrect/tree/master/zustand 安…...
竞赛 opencv python 深度学习垃圾图像分类系统
0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 opencv python 深度学习垃圾分类系统 🥇学长这里给一个题目综合评分(每项满分5分) 难度系数:3分工作量:3分创新点:4分 这是一个较为新颖的竞…...
vsto worksheet中查找关键字【关键字】获取对应的整列 union成一个range
要在 VSTO 中的工作表中查找包含特定关键字的单元格,并将这些单元格所在列合并为一个范围,可以使用以下代码:csharp using Excel Microsoft.Office.Interop.Excel;// 在工作表中查找包含特定关键字的单元格,并返回这些单元格所在…...
flask_restful规范返回值之参数设置
设置重命名属性和默认值 使用 attribute 配置这种映射 , 比如: fields.String(attributeusername) 使用 default 指定默认值,比如: fields.String(defaultsxt) from flask import Flask,render_template from flask_restful import A…...
基于java+springboot+vue实现的超市管理系统(文末源码+Lw+ppt)23-354
摘 要 系统根据现有的管理模块进行开发和扩展,采用面向对象的开发的思想和结构化的开发方法对超市管理的现状进行系统调查。采用结构化的分析设计,该方法要求结合一定的图表,在模块化的基础上进行系统的开发工作。在设计中采用“自下而上”…...
AI大模型学习:开启智能时代的新篇章
随着人工智能技术的不断发展,AI大模型已经成为当今领先的技术之一,引领着智能时代的发展。这些大型神经网络模型,如OpenAI的GPT系列、Google的BERT等,在自然语言处理、图像识别、智能推荐等领域展现出了令人瞩目的能力。然而&…...
【字符串】字符串哈希
因为习惯了STL,所以一直没有接触这块儿的内容,今天cf碰到学着用了一下发现还蛮好用的 单哈希 字符串哈希 简单来说就是把一个字符串对应到一个数上,且一个字符串唯一对应一个数,一个数也唯一对应一个字符串 怎么进行这个操作呢…...
MacOS快速安装FFmpeg、ffprobe、ffplay
文章目录 一、工具简介二、mac 安装ffprobe、FFmpeg等相关工具2.1 方法一:使用Homebrew安装FFmpeg2.2 从官网下载FFmpeg安装包,源码安装2.3 macOS 无法验证开发者时安装 一、工具简介 这些工具都是与多媒体处理和流媒体相关的开源工具,它们都…...
数据结构 之 树习题 力扣oj(附加思路版)
层序遍历 算法流程: 1.创建一个队列记为que,将根节点放入队列。 2.每次从队列中弹出一个节点,记为node。 3.第三步看这个node有没有左孩子,如果有左孩子把左孩子放入到队列中,如果node有右孩子,把右孩子放入到队列中。…...
闭包学习,闭包和高阶函数
面试官反复在前端面试中提出闭包相关的问题,并要求提供代码示例,主要是为了考察以下几点: 1.概念:考察候选人是否真正理解闭包是如何形成的,即当一个函数可以访问并操作其外部作用域中的变量,即使在其外部…...
Linux实战笔记(五) shell
大家好,我是半虹,这篇文章我们介绍一下 shell 1、Shell Shell 通常泛指系统提供给用户的操作界面,是系统内核与用户之间的连接 Shell 这个名字其实还挺形象的,中文翻译是壳,什么的壳呢,自然是系统内核的壳…...
TCP Wrappers 的使用
以ssh为例,每当有ssh的连接请求时,先读取系统管理员所设置的访问控制文件,符合要求,则会把这次连接原封不 动的转给ssh进程,由ssh完成后续工作;如果这次连接发起的ip不符合访问控制文件中的设置,…...
数据结构——lesson11排序之快速排序
💞💞 前言 hello hello~ ,这里是大耳朵土土垚~💖💖 ,欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹 💥个人主页&#x…...
Nacos部署(二)Linux部署Nacos2.3.x集群环境
😊 作者: 一恍过去 💖 主页: https://blog.csdn.net/zhuocailing3390 🎊 社区: Java技术栈交流 🎉 主题: Nacos部署(二)Linux部署Nacos2.3.x集群环境 ⏱️…...
RuoYi 自定义字典列表页面编码翻译
“字典数据”单独维护,而不是使用系统自带的字典表,应该如何使用这样的字典信息呢? 系统字典的使用,请参考: 《RuoYi列表页面字典翻译的实现》 https://blog.csdn.net/lxyoucan/article/details/136877238 需求说明…...
GAMES101 学习4
材质和外观 材质 BRDF 漫反射 任何方向的光进来都会被均匀的反射到周围各个不同的方向上去 假设能量守恒,那么 Li Lo,这之后BRDF就 ,就可以定义一个反照率 (Albeo) - ,在(0 - 1࿰…...
Redis中的缓存穿透
缓存穿透 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在,导致这些请求直接到了数据库上,对数据库造成了巨大的压力,可能造成数据库宕机。 常见的解决方案: 1)缓存无效 key 如果缓存和数据库中都查不到某…...
javaSwing超市收银(txt)
一、简介 超市收银系统是商店管理的重要组成部分,它可以帮助商家高效地进行商品管理、销售记录和结算。本文将介绍如何使用Java Swing开发一个简单的超市收银系统,包括基本功能如登录、修改商品信息、结算等,并利用txt文本作为数据库存储商品…...
Linux 理解文件系统、磁盘结构、软硬链接
目录 一、理解磁盘结构 1、磁盘的物理结构 2、硬件层面理解 3、磁盘的具体物理存储结构 4、进行逻辑抽象 5、磁盘文件的管理 6、创建新文件的过程 二、理解文件系统 1、文件的构成 2、为何选择4KB而非512字节作为基本单位? 3、文件系统的组成 数据块(Data Blocks&a…...
智慧商场数字化创新需要有数字能力帮手
商场和商圈是是促进流通创新、培育新兴消费的载体。很多实体店为适应消费升级需求新变化,加快运用现代信息技术,建设智慧商店,创新消费场景。蚓链运用现代信息技术(互联网、物联网、5G、大数据、人工智能、云计算等)&a…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
django filter 统计数量 按属性去重
在Django中,如果你想要根据某个属性对查询集进行去重并统计数量,你可以使用values()方法配合annotate()方法来实现。这里有两种常见的方法来完成这个需求: 方法1:使用annotate()和Count 假设你有一个模型Item,并且你想…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
图表类系列各种样式PPT模版分享
图标图表系列PPT模版,柱状图PPT模版,线状图PPT模版,折线图PPT模版,饼状图PPT模版,雷达图PPT模版,树状图PPT模版 图表类系列各种样式PPT模版分享:图表系列PPT模板https://pan.quark.cn/s/20d40aa…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
Golang——6、指针和结构体
指针和结构体 1、指针1.1、指针地址和指针类型1.2、指针取值1.3、new和make 2、结构体2.1、type关键字的使用2.2、结构体的定义和初始化2.3、结构体方法和接收者2.4、给任意类型添加方法2.5、结构体的匿名字段2.6、嵌套结构体2.7、嵌套匿名结构体2.8、结构体的继承 3、结构体与…...
Caliper 配置文件解析:fisco-bcos.json
config.yaml 文件 config.yaml 是 Caliper 的主配置文件,通常包含以下内容: test:name: fisco-bcos-test # 测试名称description: Performance test of FISCO-BCOS # 测试描述workers:type: local # 工作进程类型number: 5 # 工作进程数量monitor:type: - docker- pro…...
解析奥地利 XARION激光超声检测系统:无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域,无损检测(NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统,以非接触式光学麦克风技术为核心,打破传统检测瓶颈,为半导体、航空航天、汽车制造等行业提供了高灵敏…...
深入浅出WebGL:在浏览器中解锁3D世界的魔法钥匙
WebGL:在浏览器中解锁3D世界的魔法钥匙 引言:网页的边界正在消失 在数字化浪潮的推动下,网页早已不再是静态信息的展示窗口。如今,我们可以在浏览器中体验逼真的3D游戏、交互式数据可视化、虚拟实验室,甚至沉浸式的V…...
