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

为什么这种状态会被immer produce改变呢?

immer produce是一种用于JavaScript的库,它可以帮助开发者更方便地处理不可变数据。在使用immer produce时,我们可以通过修改不可变数据的方式来产生新的状态。

这种状态会被immer produce改变的原因是,immer produce采用了结构共享的方式来处理不可变数据。当我们通过immer produce修改不可变数据时,它会使用一种称为"结构共享"的技术,即只复制被修改的部分数据,而不是整个数据结构。这样做的好处是可以节省内存空间,并提高性能。

具体来说,immer produce会创建一个代理对象来代替原始的不可变数据。当我们对代理对象进行修改时,immer produce会记录下这些修改操作,并在需要时生成一个新的不可变数据。这样,我们就可以通过修改代理对象来改变不可变数据的状态。

这种方式的优势在于,我们可以像修改可变数据一样自由地修改不可变数据,而不需要手动创建新的对象或数组。这样可以简化开发过程,提高开发效率。

immer produce适用于各种场景,特别是在处理复杂的数据结构时非常有用。它可以用于前端开发、后端开发、软件测试等各个领域。无论是处理大型数据集还是处理嵌套的数据结构,immer produce都能提供高效的解决方案。

对于腾讯云的相关产品和产品介绍链接地址,由于要求不能提及具体的云计算品牌商,我无法给出具体的推荐。但腾讯云作为一家知名的云计算服务提供商,拥有丰富的云计算产品和解决方案,可以满足各种需求。您可以访问腾讯云官方网站,了解他们的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Immer使用指南

冻结对象,不会被轻易改变。 4. 深度更新轻而易举,不需要人工考虑其数据结构会被影响或者遗漏。 5. 使用简单,能使代码更简洁。 6. 对JSON补丁的一流支持 7....为什么不直接使用深拷贝? 上面说了,draft 既然可以看做是 baseState 的深拷贝对象,为什么不直接使用深拷贝?...这是因为,immer 在处理 draft的时候,如果没有变更,或者变更之后和原来一样就不会改变对象,其对象指针还是同一个。 那么如果 draft 内部处理的时候有变更?...显然 produce 返回的 nextState 对象和原来的 baseState不一样了。 这是为什么?...也就是说,immer 的根本目的是为了处理“不可变对象”而存在的(比如 React 的 state)。 为什么说是为了处理不可变对象? 对普通对象难道不行吗? 最好不要。

1.7K20
  • redux你用对了吗?

    使用纯函数来执行修改: 为了描述 action 如何改变 state tree ,你需要编写 reducers 关于第一点很容易理解,整个应用应当只有一个 store,全局唯一的 store 有利于更好的管理全局的状态...第二点,state 是只读的,因此,我们在任何时候都不应该直接修改 state,唯一能改变 state 的方法就是通过 dispatch 一个 action,间接的来修改,以此来保证对大型应用的状态进行有效的管理...immer 上面我们已经分析了 redux 里面的 reducer 为什么要返回一个全新的 state,但是,如果按照上面 reducer 的写法,要修改的 state 树层级深了之后,修改起来无疑是非常麻烦的...,那么有没有什么快捷的方式可以方便我们直接修改 state ?...库来改进我们的 reducer 写法: 安装: yarn add immer 使用: import produce from "immer"; const reducer = (state, action

    58230

    Copy-on-write + Proxy = ?

    Immer提供了一种更方便的不可变状态操作方式 二.核心优势 其方便之处主要体现在: 只有一个(核心)API:produce(currentState, producer: (draftState) =...通过这种方式来共享资源,能够显著减少无改动副本的资源消耗,而只是略微增加了资源修改操作的开销 应用 COW 策略主要应用在以下几方面: 虚拟内存管理:进程共享虚拟内存、fork()系统调用等 存储:逻辑卷管理...、文件系统、数据库快照 编程语言:PHP、Qt 中的许多数据类型 数据结构:实现不可变的数据结构,如状态树 以 fork()系统调用为例: ?...只在数据发生改变(write)时才拷贝数据结构(copy),否则共享同一个,因此: copy === myStructure // true modified !...实现仅用来说明 Immer 原理,存在浅显的 bug,不具有实用价值 就得到了核心 API produceproduce(currentState, producer: (draftState) =

    60210

    redux 文档到底说了什么(上)

    虽然文档写得不怎么样,但是里面确实给了很多比较好的代码组织方式,推荐了很多很有用的工具和插件,也慢慢地理解为什么这么简单的一个状态中心可以搞出这么多概念和库。...如上面的 reducer 就可以改写成 import produce from 'immer' // todos/reducer.ts const todosReducer = (todos: TTodo...**要做这种改动其实花费力气不小,因为 reducer.ts 的所有逻辑都要改,类型也要改。啊啊啊啊,好烦。...其实可以发现上面的最终版本感觉还可以,但是还不够智能,比如为什么要我自己去 normalize 数据?为什么要自己去写表驱动?...为什么要我自己去用 React.memo 和 useCallback 来做优化?为什么要我自己去装 redux-thunk 和 immer

    2K20

    使用React hooks处理复杂表单状态数据

    也许您还必须根据当前状态更新表单状态,例如toggle切换按钮。 现在,如果您对每个单独的表单字段使用useState,那么您可以根据当前状态计算新状态。 ?...但是,如果你有太多单独的表单字段,比如100+,那么这种方法并不友好。 脑补一下... ? 编写单独的useStates,然后为每个字段使用单独的更新函数是不切实际的。...但是,set方法就地改变对象并且不返回新副本,但在React世界中,更改检测取决于Immutability(不可变)。需要一个全新的数据副本,在内存中有一个新位置来触发渲染。...为了绕过这个,我们使用immer,来轻松地处理Javascript对象的不变性。 ?...immer中的produce函数将对象作为其第一个参数进行处理,在我们的例子中是当前状态,它的第二个参数是一个函数,它接收对象的草稿副本以进行mutate,无论你在这个函数内修改了什么草稿状态,是在副本上完成的

    3.3K20

    共享可变状态中出现的问题以及如何避免

    这种差异很少引起注意。...通过使数据不变来防止数据改变 我们可以通过使共享数据不变来防止共享数据发生改变。接下来,我们将研究 JavaScript 如何支持不变性。之后,讨论不可变数据如何帮助共享可变状态。...Immer 在其存储库中,Immer 库 的描述为: 通过更改当前状态来创建下一个不可变状态Immer 有助于非破坏性地更新(可能嵌套)普通对象和数组。也就是说,不涉及特殊的数据结构。...这是使用 Immer 的样子: 1import {produce} from 'immer/dist/immer.module.js'; 2 3const people = [ 4 {name...produce() 为我们提供了一个变量 draft。我们假设这个变量是 people,并使用通常会进行破坏性更改的操作。Immer 拦截了这些操作。代替变异draft,它无损地改变 people。

    1.6K40

    redux 文档到底说了什么(下)

    ,并使用 mutable 写法 以前的写法理解起来真的不难,因为这种做法是非常纯粹的,基本就是 JavaScript 。...注意:createSlice 里的 reducer 里可以直接写 mutable 语法,这里其实是内置了 immer。...createSelector 我们之前虽然封装好了 selector,但是只要别的地方更新使得组件被更新后,useSelector 就会被执行,而 todos.filter(...)...都会返回一个新的数组,如果有组件依赖 filteredTodos,则那个小组件也会被更新。 说白了,todos.filter(...)...这些东西要不就是更好规范 redux 代码,要不就是在dispatch(action) -> UI 更新 这个流程再多加流程,它们的最终目的都是为了更自动化地管理状态/数据,相信理解了这个思路再看那些

    77320

    放弃Redux吧,转投Zustand吧

    import create from 'zustand' import { immer } from 'immer' const useStore = create( immer(set => (...{ items: [], addItem: (item) => set(produce((draft) => { draft.items.push(item) })), })),...{ middleware: [immer] } ) 与 React Context 集成 Zustand 可以与 React Context 集成,使得在组件树中共享状态更加容易。...whitelist: 一个数组,指定哪些状态应该被持久化。只有包含在数组中的状态会被保存。 blacklist: 一个数组,指定哪些状态不应该被持久化。这是一个取反的 whitelist。...这个功能特别适用于那些需要跨会话或页面刷新保持状态的场景。 总结 以上就是zustand的全部用法了。已经简单阐述了一下为什么要选zustand而不是继续用redux。

    44010

    112.精读《源码学习》

    既然阅读源码这么重要,那么怎么才能读好源码?本周精读的文章就是一篇方法论文章,告诉你如何更好的阅读源码。 2....Immerjs 源码的精华 Immer 可以让我们以 Mutable 的方式更新对象,最终得到一个 Immutable 对象: this.setState(produce(state => (state.isShow...上面的例子中,state 已经是一个代理(Proxy)对象,通过自定义 setting 不断递归进行浅拷贝,最后返回一个新引用的顶层对象作为 produce 的返回值。...不论前端 React Vue 还是后端框架 Koa 等,一般都有内置的 context,一般实现这种优雅语法的框架内部都会维护 context。...等价于 从 epitath 中,我们了解到 generator 原来可以这么用,正因为其执行是多次迭代的,因此我们可以利用这个特性,改变代码运行结构

    41320
    领券