重构利器:如何用 Immer 优雅地管理应用状态

1. immer

immer 是一个 JavaScript 库,用于处理不可变数据的状态更新。不可变数据意味着一旦创建,数据结构就不能被修改。在编写复杂的应用程序时,不可变性可以带来一系列好处,比如更容易追踪数据的改变、更容易实现撤销/重做功能以及更简单的状态管理。

然而,处理不可变数据结构通常需要编写大量的样板代码,尤其是在更新嵌套结构时。immer 库通过提供一个简单的可变(mutable)API 来更新不可变(immutable)状态,从而简化了这一过程。

immer 的核心概念是“草稿状态”(draft state)。这个库允许你编写看似可变的代码来更新一个不变的状态,但实际上,你是在修改的一个临时的草稿状态。一旦修改完成,immer 会基于这个草稿状态产生一个新的不可变状态。

2. 诞生背景

immer 的诞生背景主要与在 JavaScript 应用中管理复杂的不可变状态有关。在 React 和 Redux 等现代前端框架和库中,不可变数据的概念非常重要,因为它帮助开发者避免直接修改状态,从而避免潜在的副作用和性能问题。不可变数据还使得状态的变化更加可预测,便于跟踪和调试,同时也简化了复杂的功能如时间旅行(time travel debugging)和状态快照的实现。

React 的 setState 方法和 Redux 的 reducer 函数都要求你返回一个新的状态对象,而不是修改原有的状态。当状态结构简单时,这通常不是问题,但当应用逐渐变得复杂,状态结构也变得更加嵌套时,更新状态会变得越来越繁琐。例如,如果你需要更新一个嵌套的数组或对象,你需要逐层克隆所有父级对象,直到达到你想要修改的属性。这不仅编写起来复杂,而且容易出错。

为了解决这个问题,Michel Weststrate(也是 MobX 库的作者)创建了 immer。他的目标是创建一个库,它能够让你以一种更自然和声明式的方式更新不可变状态,同时避免手动处理复杂的对象和数组克隆操作。通过 immer,你可以继续编写简单直观的可变代码,但是产生的结果是按照不变性原则处理的,这样就既保持了代码的简洁,也确保了状态的不可变性。

简而言之,immer 的诞生背景是为了解决在处理复杂不可变状态时的编码复杂性问题,同时帮助开发者避免常见的不可变数据操作错误,提高代码的可维护性和可读性。

3. immer 对象克隆算法的简单实现

immer 库使用了一种称为结构共享的技术来实现对象克隆,这种技术可以有效地创建新的不可变状态,同时尽可能地重用旧状态中未修改的部分。下面是一个简化版的 immer 克隆算法的实现,用于展示其基本原理:

function createDraft(initialState) {// 遍历对象,递归地将其属性转化为可写。function createProxy(state) {if (typeof state === "object" && state !== null) {return new Proxy(state, {get(target, prop) {if (prop === "isDraft") return true;return createProxy(target[prop]);},set(target, prop, value) {target[prop] = value;return true;},});}return state;}return createProxy(initialState);
}function finishDraft(draft) {// 遍历对象的草稿版本,并递归地生成最终的不可变状态。function finalize(state) {

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

更新win11后无法上网

问题描述 系统提示可以更新win11了,然后我就想着更新一下试试。等了好久终于下载完了准备更新,结果提示更新失败,再次更新时下载到一半就停了,然后就发现连不上网了(真服了,win11没更新成功,还…

MATLAB环境下一维时间序列信号的同步压缩小波包变换

时频分析相较于目前的时域、频域信号处理方法在分析时变信号方面,其主要优势在于可以同时提供时域和频域等多域信号信息,并清晰的刻画了频率随时间的变化规律,已被广泛用于医学工程、地震、雷达、生物及机械等领域。 线性时频分析方法是将信…

「C++ 类和对象篇 10」初始化列表

目录 一、什么是初始化列表? 二、为什么需要初始化列表? 三、初始化列表怎么使用? 3.1 在构造函数中使用初始化列表 3.2 注意 3.3 结论 3.4 应用场景 四、初始化列表的初始化顺序 五、另一种初始化成员变量的方法 【总结】 一、什么是初始化…

快速幂的应用

1.非递归的解法 #include <iostream> using namespace std; int main(){int a,b,c,t1;cin>>a>>b>>c;if(a>2&&a<1e3&&b>0&&a<1e7&&c>2&&c<1e5)for(int i0;i<b;i)tt*a%c;cout<<t;r…

Python算法题集_随机链表的复制

Python算法题集_随机链表的复制 题138&#xff1a;随机链表的复制1. 示例说明2. 题目解析- 题意分解- 优化思路- 测量工具 3. 代码展开1) 标准求解【双层循环】2) 改进版一【字典哈希】3) 改进版二【单层哈希】4) 改进版三【递归大法】 4. 最优算法 本文为Python算法题集之一的…

Verilog刷题笔记24

题目&#xff1a; Verilog has a ternary conditional operator ( ? : ) much like C: (condition ? if_true : if_false) This can be used to choose one of two values based on condition (a mux!) on one line, without using an if-then inside a combinational alwa…

K8s环境下rook-v1.13.3部署Ceph-v18.2.1集群

文章目录 1.K8s环境搭建2.Ceph集群部署2.1 部署Rook Operator2.2 镜像准备2.3 配置节点角色2.4 部署operator2.5 部署Ceph集群2.6 强制删除命名空间2.7 验证集群 3.Ceph界面 1.K8s环境搭建 参考&#xff1a;CentOS7搭建k8s-v1.28.6集群详情&#xff0c;把K8s集群完成搭建&…

C#,欧拉常数(Euler Constant)的算法与源代码

1 欧拉常数 欧拉常数最先由瑞士数学家莱昂哈德 欧拉 (Leonhard Euler) 在1735年发表的文章《De Progressionibus harmonicus observationes》中定义。欧拉曾经使用γ作为它的符号&#xff0c;并计算出了它的前6位&#xff0c;1761年他又将该值计算到了16位 。 欧拉常数最先由瑞…

java实现文件随机加密

1、引言 有时候我们需要对我们的某些文件数据进行加密&#xff0c;并且不希望被轻易破译&#xff0c;此时最好不要使用已知的加密方法&#xff0c;这里我就给大家提供一种数据加密的方式&#xff0c;用以实现文件数据的加密&#xff0c;我称之为随机加密&#xff0c;即使是对相…

setState的参数

目录 1、setState的第一个参数 2、setState的第二个参数 3、在 React 底层主要做了那些事呢&#xff1f; 4、类组件如何限制 state 更新视图 React 项目中的 UI 的改变来源于 State 改变&#xff0c;类组件中 setState 是更新组件&#xff0c;渲染视图的 1、setState的第一个参…

vs2013与对应的opencv3.2下载地址和环境配置

Visual Studio community 2013 • 链接&#xff1a; https://pan.baidu.com/s/1ye-EDDyUGsy8EaZKaq9Ksw 提取码&#xff1a; 06lw -- 来自百度网盘超级会员 V7 的分享 • 也可以从下面官网下载 https://learn.microsoft.com/zh-tw/visualstudio/releasenotes/vs2013-communit…

【JAVA WEB】 百度热榜实现 新闻页面 Chrome 调试工具

目录 百度热榜 新闻页面 Chrome 调试工具 --查看css属性 打开调试工具的方式 标签页含义 百度热榜 实现效果&#xff1a; 实现代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"vi…

骑砍MOD天芒传奇-天芒使用方法

骑砍1战团mod天芒传奇-使用红色天芒碎片开P51战斗机_单机游戏热门视频 (bilibili.com)https://www.bilibili.com/video/BV1nm41197iA/ 一.黄色天芒碎片 天芒盒子 野外战斗H键-召唤徐天地 二.绿色天芒碎片 天芒盒子 野外战斗H键-站在巨人肩膀上战斗 三.蓝色天芒碎片 天芒盒…

鸿蒙(HarmonyOS)项目方舟框架(ArkUI)之StepperItem组件

鸿蒙&#xff08;HarmonyOS&#xff09;项目方舟框架&#xff08;ArkUI&#xff09;之StepperItem组件 一、操作环境 操作系统: Windows 10 专业版、IDE:DevEco Studio 3.1、SDK:HarmonyOS 3.1 二、StepperItem组件 用作Stepper组件的页面子组件。 子组件 无。 接口 St…

GO语言笔记4-标识符、关键字与运算符

标识符 什么是标识符 变量名、方法名等我们起的名字都是标识符 标识符定义规则 字母、数字、下划线组成不可以数字开头&#xff0c;严格区分大小写&#xff0c;不能带有空格&#xff0c;不可以是go的关键字不能单独使用 下划线&#xff0c;因为下划线在GO中是一个特殊标识符&…

Java 学习和实践笔记(6)

各数据类型所占的空间&#xff1a; byte: 1个字节 short&#xff1a;2个字节 int&#xff1a;4个 long&#xff1a;8个 float&#xff1a;4个 double: 8个 char:1个 boolean:1bit 所有引用数据类型都是4个字节&#xff0c;实际其值是指向该数据类型的地址。 上图中稍特…

Linux 从日志中抽取信息,批量生成SQL语句并执行

这里写目录标题 一. 需求分析二. 从日志中抽取出指定字段&#xff0c;并切分为若干个子文件三. 生成查询执行计划四. 生成查询的SQL语句五. 检查并执行 一. 需求分析 有如下日志文件&#xff0c;假设日志文件中有10000条数据&#xff0c;要求将全部的TRANSACTIONID抽取出来&am…

【C++】多态语法概念

目录 一、概念及定义二、虚函数重写的特例三、final和override四、抽象类 一、概念及定义 概念&#xff1a;在继承关系下的不同类&#xff0c;调用同一个函数&#xff0c;产生不同的行为&#xff0c;叫作多态。 图示&#xff1a; 定义&#xff1a;必须通过基类的指针或者引…

【多模态大模型】Latent Diffusion:在潜在空间而非像素空间进行操作,从而减少了计算复杂度

Latent Diffusion Stable Diffusion 和 Latent Diffusion扩散模型的成本问题子问题1: 高计算成本和训练复杂度子问题2: 保持生成图像的视觉保真度子问题3: 实现多模态和高分辨率图像合成子问题4: 保持图像质量与细节Latent Diffusion 过程&#xff1a; 总结子问题/子解法1&…

实战案例:将已有的 MySQL8.0 单机架构变成主从复制架构

操作步骤 修改 master 主节点 的配置&#xff08; server-id log-bin &#xff09;master 主节点 完全备份&#xff08; mysqldump &#xff09;master 主节点 创建复制用户并授权master 主节点 将完全备份文件拷贝至从节点修改 slave 从节点 的配置&#xff08; server-id rea…