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

学习 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 创建一个 store
  • set 函数修改 store 内容
  • get 函数,获取当前 store 中内容
  • store.getState() 静态获取当前 store 的所有内容
  • store.subscribe(listener) 订阅 store 变更,任意一个值变更,都会执行 listener
  • useShallow 可以开启浅比较,对象属性变化不触发

中间件

  • subscribeWithSelector 在创建 store 时候增加,允许订阅的时候增加选择器,来限制监听的范围 listener 中返回的数据和选择器选择的内容一致。
  • devtools 在创建 store 时候增加,结合 redux-dev-tools 浏览器插件可以查看 store 变化
  • 处理持久化,persist 开启持久化,createJSONStorage 使用 JSON.stringifyJSON.parse把值设置为 JSON 字符串进行存取

疑问

  • zustand.set 的返回值直接覆盖全部 state 还是做数据合并到 state 中?
    由第二个参数控制,默认是 false 标识数据合并,当返回 true 时候,是直接覆盖。

  • 当一次从 store 中获取多个数据时候,建议使用 zustand/react/shallow 有啥用?
    可以进行浅比较,避免没必要的渲染,和所有的浅比较一样,也会引入数据变化无感知的困惑,可以结合 devtools 来检查

  • 对比 UpdateObj.tsxUpdateObj2.tsxShallowEqual.tsx 中获取 store 数据的方式,为什么只有 UpdateObj.tsx 可以监听到变化?

    • UpdateObj.tsxUpdateObj2.tsx 都没有使用 useShallow
      但是 UpdateObj2.tsx(state) => stat.user 每次返回的都是 store 中的 user,所以对组件而言路径地址没变,所以不触发刷新。
      UpdateObj.tsx(state) => ({user: stat.user}) 每次返回的都是一个新的 {user: xxx} 对象,地址一直在变,所以触发刷新
    • UpdateObj.tsxShallowEqual.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不符合访问控制文件中的设置&#xff0c…...

数据结构——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&#xff0…...

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…...

工程地质软件市场:发展现状、趋势与策略建议

一、引言 在工程建设领域,准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具,正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

【Web 进阶篇】优雅的接口设计:统一响应、全局异常处理与参数校验

系列回顾: 在上一篇中,我们成功地为应用集成了数据库,并使用 Spring Data JPA 实现了基本的 CRUD API。我们的应用现在能“记忆”数据了!但是,如果你仔细审视那些 API,会发现它们还很“粗糙”:有…...

爬虫基础学习day2

# 爬虫设计领域 工商:企查查、天眼查短视频:抖音、快手、西瓜 ---> 飞瓜电商:京东、淘宝、聚美优品、亚马逊 ---> 分析店铺经营决策标题、排名航空:抓取所有航空公司价格 ---> 去哪儿自媒体:采集自媒体数据进…...

【JavaWeb】Docker项目部署

引言 之前学习了Linux操作系统的常见命令,在Linux上安装软件,以及如何在Linux上部署一个单体项目,大多数同学都会有相同的感受,那就是麻烦。 核心体现在三点: 命令太多了,记不住 软件安装包名字复杂&…...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...

LLMs 系列实操科普(1)

写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...

腾讯云V3签名

想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...

关于uniapp展示PDF的解决方案

在 UniApp 的 H5 环境中使用 pdf-vue3 组件可以实现完整的 PDF 预览功能。以下是详细实现步骤和注意事项&#xff1a; 一、安装依赖 安装 pdf-vue3 和 PDF.js 核心库&#xff1a; npm install pdf-vue3 pdfjs-dist二、基本使用示例 <template><view class"con…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...

pikachu靶场通关笔记19 SQL注入02-字符型注入(GET)

目录 一、SQL注入 二、字符型SQL注入 三、字符型注入与数字型注入 四、源码分析 五、渗透实战 1、渗透准备 2、SQL注入探测 &#xff08;1&#xff09;输入单引号 &#xff08;2&#xff09;万能注入语句 3、获取回显列orderby 4、获取数据库名database 5、获取表名…...