首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Immer使用指南

(如果没有 draft 对 state 对象做修改,那么返回和原对象是一样的,绝对相等) 此外,它还使得克隆成本相对较低: 原对象,未更改的属性(树)部分不做复制,在内存与原旧版本的属性共享属性...2.Immer能避免对不可变对象进行深度更新时,所需要的常规手动拷贝代码的实现 如果没有Immer,对象副本需要在每一级上手工创建其副本,通常通过使用很解构操作(…obj)操作。...3.使用Immer时,您不需要额外学习专用的api或数据结构, 使用普通的JavaScript数据结构并使用常规方式修改数据即可,操作简单且安全。 为什么要使用Immer?...深度更新轻而易举,不需要人工考虑其数据结构会被影响或者遗漏。 5. 使用简单,能使代码更简洁。 6. 对JSON补丁的一流支持 7....需要复制一个不可变对象,不改变原对象的情况下,修改其中的某个,保存为一个新的对象。 3. 复制一个不可变的数组不改变原数组的情况下,修改其中某个,保存为新的数组

1.7K20

immer:优雅操作react数据状态,告别繁琐克隆拷贝

::: Immer 使得 React 中使用不可变数据更加容易,通过提供简洁的 API 和直观的语法,以可变的方式更新不可变数据。...状态更新的简洁性:React 的传统方式是通过使用 setState 方法更新状态,需要手动创建新的状态对象或数组,并进行深度克隆。...我们使用 produce 函数将状态更新的逻辑放在一个回调函数,然后将回调函数传递给 setState。...我们可以回调函数对 draft 对象进行更改,Immer 会自动处理状态的更新。...# 总结 使用 React 组件时,可以使用 produce 函数来更新状态,而在使用 Redux 时,可以 reducer 中使用 produce 函数来进行状态更改操作。

93420
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    使用Immer解决React对象深度更新的痛点

    复杂对象的更新 组件,工单的所有参数都保存在一个对象,像这样 const [formConfig,setFormConfig] = useState( { type: ''...= newName })) 是不是瞬间感觉非常的清爽,我们通过Immer提供的produce方法,可以直接像深拷贝那样,新对象上做修改 更重要的是, immer 的背后做了性能优化,而不是简单的全部深度拷贝...,所以不用担心性能问题 Immer 的优点 Immer有着许多便捷和性能上的优势: 遵循不可变数据范式,同时使用普通的JavaScript对象、数组、集合和映射,上手即用 开箱即用的结构共享 开箱即用对象冻结...更新轻而易举 冗余代码更少 对JSON补丁的一流支持 仅有3KB Immer工作原理 当我们调用 immer 的 API produce时,immer 将内部暂时存储着我们的目标对象(以 state...Immer Hook 如果你觉得每次调用setState的时候都需要配合使用一次produce函数很冗余,没关系,Immer也有对应的React Hook方法 将produce封装到useState

    90341

    使用insert () MongoDB插入数组

    “insert”命令也可以一次将多个文档插入到集合。下面我们操作如何一次插入多个文档。...我们完成如下步骤即可: 1)创建一个名为myEmployee 的JavaScript变量来保存文档数组; 2)将具有字段名称和的所需文档添加到变量; 3)使用insert命令将文档数组插入集合...结果显示这3个文档已添加到集合。 以JSON格式打印 JSON是一种称为JavaScript Object Notation的格式,是一种规律存储信息,易于阅读的格式。...如下的例子,我们将使用JSON格式查看输出。 让我们看一个以JSON格式打印的示例 db.Employee.find()。...这样做是为了确保明确浏览集合的每个文档。这样,您就可以更好地控制集合每个文档的处理方式。 第二个更改是将printjson命令放入forEach语句。这将导致集合的每个文档以JSON格式显示。

    7.6K20

    Gas 优化:Solidity 使用动态数组

    译文出自:登链翻译计划[1] 译者:aisiji[2] 校对:Tiny 熊[3] Solidity ,动态数组是否比引用数组效率更高吗?...理想情况下,这些数据存储一个小数值的动态数组。 在这篇文章的例子,我们研究了 Solidity 中使用动态数组是否比引用数组或类似解决方案处理这些小数值时更高效。...讨论 当我们有一个由已知的小数值的小数组(长度小)组成的数据时,我们可以 Solidity 中使用一个数值数组(Value Arrays),在这篇文章[6],我们提供并测量了 Solidity 数值数组...可能的动态数组 Solidity ,只有 storage 类型有动态数组。memory 类型的数组必须有固定长度,并且不允许使用push()来附加元素。...在下面的代码,我们将数组长度存储256位(32字节)机器码的最高位。

    3.3K30

    干货 | 揭秘 Vue 3.0 最具潜力的 API

    react 路线:如何从普通的 value ,通过函数管道,输出一个 view。 vue 路线:如何从一个特殊的(响应式的),衍生出普通的以及 view。...首先实现一个 combinaLatest([value$]) ,得到一个 value$ 范畴内构造数组的方式,然后通过 [[key, value]] ,从处理数组的方式,配合 fromEntries...因此,我们基于 object$ 可以实现 view$,它代表了一个时间序列动态输出的视图流,并且因为 combinaLatest 自动复用未变化的,使得 view$ -> view 输出的结构,总是结构共享的...这意味着,它总是返回 immutable-list,因为它跟 immer 一样 copy-on-write。 我们免费得到了一个行走的 immer,不需要 produce 包裹。...mobx 作者的 immer,是现用现抛,nextState = produce(state, update)。

    1.5K10

    150 行代码,手搓一个 Immer

    produce函数,就能弄清楚 Immer 的秘密了 二.思路 仔细观察produce的用法,不难发现 5 个特点(见注释): const myStructure = { a: [1, 2, 3],...=> { // 1.producer函数访问draftState,就像访问原值currentState一样 myStructure.a.push(4); myStructure.b++...,produce()返回新 modified !...根节点预先创建一个 Proxy,对象树上被访问到的所有中间节点(或新增子树的根节点)都要创建对应的 Proxy 而每个 Proxy 都只监听到写操作(直接赋值、原生数据操作 API 等)时才创建拷贝...与正版相比,实现方案上有两点差异: 创建代理的方式不同:imer 使用new Proxy,immer 采用Proxy.revocable() 整合方案不同:imer 反向构建拷贝树,immer 正向遍历代理对象树

    91010

    为什么说 90% 的情况下,immer 能完胜 immutable?

    我们从源码看一下: 首先是继承 PureComponent 的 class 组件: 你会发现 React 更新 class 组件的时候,会判断如果是 PureComponent,那么会浅比较 props...= produce(obj, draft => { draft.a.b = 2 }); obj 是原对象,调用 produce 传入该对象和要对它做的修改,返回就是新对象: 后面就是普通...我们 class 组件里用一下: setState 的时候调用 produce,传入原来的 state 和修改函数,这样返回的就是新的 state。...这样写: immer 这样写: 没有对比就没有伤害,从使用体验上,immer 完胜。...immer 只有一个 produce api,传入原对象和修改函数,返回的就是新对象,使用新对象就是普通 JS 对象的用法。

    44320

    潜心优化,limu终达不可变数据性能之巅

    limu面向现代浏览器而设计,只考虑支持Proxy的运行环境,使用了读时浅复制写时标记更新的机制来达到让用户像操作原始数据一样操作可变数据,操作过程始终只为读取节点生成代理对象返回给用户,读取后父子节点间直接用浅克隆节点相连...性能优异 由于提前做了浅克隆操作,且只克隆读取过的路径并改变父子节点相互之间的路径指向,结束草稿时只需判断modified变量真假来瞬间完成新的副本生成动作,在数据大读取少的场景性能超过immer20...优化过程 3.12之前,limu虽然性能已超过immer数倍,但离structura、mutative这些新起的不可变数据操作库还有不少差距,故只能把调试友好、比immer快几倍来作为宣传点,如需追求极致的速度还是默认推荐了...,我们的的是测试数据包含一个20+key的字典, key对应的数据深度为 26层 同时还会生成一个长度10000的数组 测试角色准备 测试角色除了immer,limu,mutative,structura...这四个库,还新增了pstr和native pstr使用JSON.parse和JSON.stringify来模拟immerproduce // code of pstr exports.createDraft

    22710

    必会算法:旋转有序的数组找最小

    大家好,我是戴先生 今天给大家介绍一下如何利用玄学二分法找出最小 想直奔主题的可直接看思路2 这次的内容跟 必会算法:旋转有序的数组搜索 有类似的地方 都是针对旋转数据的操作 可以放在一块来学习理解...##题目 整数数组 nums 按升序排列,数组互不相同 传递给函数之前,nums 预先未知的某个下标 k(0 <= k < nums.length)上进行了 旋转,使数组变为 [...,称之为一次旋转 现将nums进行了若干次旋转 找到数组的最小,并返回结果 ##题解 ###思路1 简单粗暴:遍历 就不多介绍了,大家都懂 时间复杂度:O(n) 空间复杂度:O(1) ###...所以最小就是二段的第一个元素 还有一种极端的情况就是 经过多次旋转之后 数组又变成了一个单调递增的数组 此时的最小就是第一个元素 我们用数组[1,2,3,4,5,6,7,8,9]举例说明 3...次旋转之后是这个样子 此时我们还不知道这个数组是分了两段 还是单调递增的 使用二分查找的话,首先还是先找到中位数 start=0,nums[start]=4 end=8,nums[end]=3 mid

    2.3K20

    你不知道的高性能实现深拷贝的方式

    这种类型使用的过程,因为传递的是引用,所以很容易发生一些副作用,比如: let a = { age: 1 } let b = a b.age = 2 上述代码的写法会造成 a 和 b 的属性都被修改了...深拷贝的做法一般分两种: JSON.parse(JSON.stringify(a)) 递归浅拷贝 第一种做法存在一些局限,很多情况下并不能使用,因此这里就不提了;第二种做法一般是工具库的深拷贝函数实现方式...这里判断的核心是通过 value[MY_IMMER],因为只有当是 proxy 对象以后才会触发我们自定义的拦截 get 函数,拦截函数判断如果 key 是 MY_IMMER 的话就返回 target...接下来我们需要判断参数是否是一个正常 Object 构造出来的对象或数组,isPlainObject 网上有很多实现,这里就不贴代码了,有兴趣的可以文末阅读源码 最后我们需要判断相应的 proxy...然后 copy 赋值时不能把 proxy 对象赋值进去,否则最后生成的不可变对象内部会内存 proxy 对象,所以这里我们需要判断下是否为 proxy 对象 创建 copy 的逻辑很简单,就是判断数据的类型然后进行浅拷贝操作

    1.4K30

    Copy-on-write + Proxy = ?

    Immer提供了一种更方便的不可变状态操作方式 二.核心优势 其方便之处主要体现在: 只有一个(核心)API:produce(currentState, producer: (draftState) =...通过 COW 机制来实现进程间的内存共享,按需拷贝 Immer 与 Copy-on-write Immer ,Copy-on-write 机制用来解决拷贝数据结构产生的性能负担,如下图: ?...实现仅用来说明 Immer 原理,存在浅显的 bug,不具有实用价值 就得到了核心 API produceproduce(currentState, producer: (draftState) =...> void): nextState Immer ,data之上的proxy被称为 Draft(草稿): ?...,就像 Photoshop 的图层操作: 打开图片 新建图层,新图层上涂涂抹抹 合并图层 参考资料 Copy-on-write ZFS Administration, Part IX- Copy-on-write

    61110
    领券