开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么use immer的初始值不变？

useImmer是一个用于管理可变状态的React Hook，它基于Immer库实现。Immer库通过使用不可变数据结构和结构共享的方式，使得在修改状态时可以直接修改原始数据，而不需要创建新的副本。这样可以提高性能并减少内存消耗。

在使用useImmer时，初始值不会改变的原因是因为Immer库会对初始值进行代理。当我们通过useImmer返回的setState函数修改状态时，Immer会根据修改的操作生成一个新的状态，并将其与原始状态进行比较。如果新状态与原始状态相同，Immer会返回原始状态，这样就避免了不必要的重新渲染。

这种设计有以下几个优势：

性能优化：由于Immer只会生成修改过的新状态，而不是创建完全相同的副本，因此可以减少不必要的内存消耗和重新渲染，提高应用的性能。
简化逻辑：使用useImmer可以直接修改状态，而不需要手动创建新的副本或使用深拷贝。这样可以简化代码逻辑，提高开发效率。
减少bug：由于Immer会自动处理状态的变更，避免了手动处理不可变数据的复杂性，减少了出错的可能性。

在使用useImmer时，可以根据具体的场景选择合适的腾讯云产品。例如，如果需要在云端存储和管理状态数据，可以使用腾讯云的对象存储（COS）服务；如果需要实时同步状态数据，可以使用腾讯云的消息队列（CMQ）服务；如果需要进行数据分析和挖掘，可以使用腾讯云的大数据分析（CDP）服务等。

更多关于腾讯云产品的信息和介绍，可以访问腾讯云官方网站：https://cloud.tencent.com/

相关搜索:为什么"use strict“不是默认的？为什么BERT模型必须保持10%的掩码标记不变？为什么count的值不变为什么MouseOver上的按钮颜色不变为什么NavigationBar的背景颜色不变？为什么StringBuild中的字符不变？为什么不变的变量会被React的状态机改变？为什么不执行app.use()中的中间件为什么乌龟的颜色不变？为什么修改后numpy向量的值不变？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

为什么说 90% 的情况下，immer 能完胜 immutable？

这是为什么 function 组件里 setState 上次的 state 不行的原因。...时，会对比 state 本身变没变，变了就会重新渲染 为什么 function 组件里只对比了 state 没有对比每个 key 的值也很容易理解，因为本来每个 state就是用 useState 单独声明的了...有的同学可能会问，为什么要 sate.a 用 fromJS 转成 immutable，而不是整个 state 呢？...这样写： immer 这样写：没有对比就没有伤害，从使用体验上，immer 完胜。...90% 的情况下，immer 能完胜 immutable。

4272 0

React 组件优化

immer 库就是为了解决这个问题的。它是 mbox 库的作者的另一个作品，与 mobx 一样简单易用。...; useImmer useImmer 是一个 React Hook，使用时需要先下载： npm install immer use-immer -S use-immer 包有两个 Hook：useImmer...例如： import { useImmer } from "use-immer"; function App(){ // 使用 useImmer 钩子 let [list, updateList...而 immer 轻量、简洁、易上手、并且使用起来也非常的舒服，不会产生容易把 immutable 数据类型与原生 JS 数据类型搞混的情况。 3....用法下面写个例子，一个表单，我们需要表单做验证，验证不通过就提示用户为什么不对。

7.2K2 0

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

React的心智负担 为什么要这样写？...，我们通过Immer提供的produce方法，可以直接像深拷贝那样，在新对象上做修改更重要的是，在 immer 的背后做了性能优化，而不是简单的全部深度拷贝，所以不用担心性能问题 Immer 的优点...补丁的一流支持仅有3KB Immer工作原理当我们调用 immer 的 API produce时，immer 将内部暂时存储着我们的目标对象（以 state 为例） immer 暴露一个 draft..., { useCallback } from "react"; import { useImmer } from "use-immer"; const TodoList = () => { const...import React, { useCallback } from "react"; import { useImmerReducer } from "use-immer"; const TodoList

7454 1

Tkinter mainloop() 循环的逻辑，以及变量为什么不会被重新赋值为初始值？

1、问题背景在使用 Tkinter 开发 GUI 程序时，您可能会遇到这样的疑问：为什么在使用 window.mainloop() 循环时，变量不会被重新赋值为它们的初始值？...既然如此，为什么一个变量（例如 canvastext）可以被更新并保持更新状态？...也许我对 window.mainloop() 的作用完全误解了，但如果它确实使程序不断循环执行代码，那么为什么不将变量重新赋值为它们的初始值呢？...它只是不断地从事件队列中获取事件，然后将事件分发给相应的处理函数。处理函数可以修改变量的值，但不会影响其他代码中的变量。也就是说，变量的值只会在处理函数中被修改，而在其他代码中不会被修改。...希望这篇技术文章能够帮助您理解 Tkinter window.mainloop() 循环的逻辑，以及变量为什么不会被重新赋值为初始值。

1981 0

C语言free释放内存后为什么指针里的值不变？竟然还可以输出？

今天你家范儿给大家带来一个的东西——关于C语言为什么释放指针后，指向这块内存的指针的值不变问题的编程经验!!行了，咱们话不多少，直接上主食。...正所谓”有借有还，再借不难”，不少同学会问为什么释放指针后，指向这块内存的指针的值不变呢，我们今天为大家揭秘。...下图可以看到，在VC6编译环境下，观察指针p的指针所指向的内容已经被strcpy后改变。 ?...而关于free之后，p的之后为何没有改变，仍然还是这个原先堆空间的这个地址，原因在于free函数仅仅是将malloc申请的内存释放回去，所谓的释放也就是告诉编译器，这块内存已经使用完毕，可以收回了。...也可能有新的租客入驻更改房子的内置，也可能还是这个样子。取决于不同的房东(编译器)和租客(内容)。

2.4K8 0

Immer使用指南

3.在使用Immer时，您不需要额外学习专用的api或数据结构，使用普通的JavaScript数据结构并使用常规方式修改数据即可，操作简单且安全。 为什么要使用Immer？...当然，其效果和深拷贝对象是非常类似的，和操作一个对象的完全复制体一样，修改 draft 的时候并不会影响原来的 baseState。 为什么不直接使用深拷贝呢？...上面说了，draft 既然可以看做是 baseState 的深拷贝对象，为什么不直接使用深拷贝呢？还是有区别的，因为 immer 处理对象也仅仅是看起来像是深拷贝，其实不是，还是有一些区别的。...显然 produce 返回的 nextState 对象和原来的 baseState不一样了。这是为什么呢？...也就是说，immer 的根本目的是为了处理“不可变对象”而存在的（比如 React 的 state）。 为什么说是为了处理不可变对象呢？对普通对象难道不行吗？最好不要。

1.7K2 0

这些 hook 更优雅的管理你的状态

构建属于自己的 React hooks 工具库。培养阅读学习源码的习惯，工具库是一个对源码阅读不错的选择。...还有其他更优雅的方式？我们可以使用 use-immer[1] useImmer(initialState) 非常类似于 useState。...该函数返回一个元组，元组的第一个值是当前状态，第二个是 updater 函数，它接受一个 immer producer 函数或一个值作为参数。...，一直保持引用不变 // 保存上一次值 const prevRef = useRef(); // 当前值 const curRef = useRef(); // 自定义是否更新上一次的值...参考资料 [1] use-immer: https://github.com/immerjs/use-immer

9011 0

150 行代码，手搓一个 Immer

写在前面 Immer结合 Copy-on-write 机制与 ES6 Proxy 特性，提供了一种异常简洁的不可变数据操作方式： const myStructure = { a: [1, 2, 3...produce函数，就能弄清楚 Immer 的秘密了二.思路仔细观察produce的用法，不难发现 5 个特点（见注释）： const myStructure = { a: [1, 2, 3],...就像访问原值currentState一样 myStructure.a.push(4); myStructure.b++; }); // 2.producer中不修改draftState的话，引用不变.../imer npm package：imer 五.对比 Immer 与正版相比，实现方案上有两点差异：创建代理的方式不同：imer 使用new Proxy，immer 采用Proxy.revocable...() 整合方案不同：imer 反向构建拷贝值树，immer 正向遍历代理对象树通过Proxy.revocable()创建的 Proxy 能够解除代理关系，更安全些而 Immer 正向遍历代理对象树也是一种相当聪明的做法

8911 0

鲁迅：世上本只需要一个Modal组件

wrapped with "); } return value; } return { Provider, useContainer };} 2. use-immer...A hook to use immer as a React hook to manipulate state....一个用于将 immer 作为 React hook 来操纵状态的 hook。 use-immer 可以将 state 数据 immutable，更新深层嵌套数据更为方便，且有函数编程的感觉。...每次只有一个激活的modal和选中的数据一一对应，两者都是用操作的一瞬间确定的，且每次只有一个 modal 处于激活状态，所以用户的各种操作只是不断更新modal和data而已。...所以假如全局有一个的专门记录 modal 的地方，这样我们只需将用户要激活的modal不断替换，然后在全局的某处挂载当前激活的modal。

1.5K1 0

redux你用对了吗？

，为什么 reducer 必须要返回一个全新的 state，直接修改完了 state 再返回不行吗？...immer 上面我们已经分析了 redux 里面的 reducer 为什么要返回一个全新的 state，但是，如果按照上面 reducer 的写法，要修改的 state 树层级深了之后，修改起来无疑是非常麻烦的...当然，除了 immer 之外，还有别的库也同样能解决我们的问题，但是 immer 应该是最简单也是最容易上手的一个库之一了。...，什么是纯函数，以及为什么 reducer 需要返回一个全新的 state ？...从源码角度分析了需要返回全新state的原因，最后引入了immer库，引入了 immutable 概念，redux 配合 immer 可以方便我们便捷高效的用好 redux。

5723 0

前端基建规范参考

引入 immer 来优化性能和简化写法 ?...Immer 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 Proxy(不支持Proxy的环境会自动使用Object.defineProperty来实现)，几乎以最小的成本实现了...使用immer后,age没变时不会生成新的引用，同时语法也更简洁，可以优化性能。...: 1 }, { price: 200, num: 1 }]) // 不使用用immer const onAdd = (index: number) => { /** 不使用immer */...use-immer 简化写法: import useImmer from 'use-immer' const [ list, setList ] = useImmer([{ price: 100, num

2193 0

linux内核空间进程为什么无论如何切换，内核地址空间转换到物理地址的关系是永远不变的？

在Linux内核中，无论如何切换进程，内核地址空间转换到物理地址的关系是永远不变的，主要原因是内核地址空间在所有进程中是共享的。这种设计有几个关键点： 1....内核地址空间共享在Linux操作系统中，每个进程都有自己独立的用户空间地址范围，但内核空间地址范围对所有进程是共享的。...具体来说，每个进程的地址空间被划分为用户空间和内核空间两部分：用户空间：每个进程有独立的用户空间地址，通常在较低的地址范围。内核空间：所有进程共享相同的内核空间地址，通常在较高的地址范围。...内核地址空间映射内核地址空间直接映射到物理内存的某个范围内，这种映射在系统启动时就已经建立，并且在系统运行期间保持不变。也就是说，内核空间的虚拟地址总是映射到相同的物理地址。 3....总结由于内核地址空间在所有进程中是共享的，并且在系统启动时已经建立了固定的映射关系，内核地址空间转换到物理地址的关系在整个系统运行期间保持不变。

1061 0

简单通俗的理解Vue3.0中的Proxy

为什么使用 Proxy 可以解决上面的问题呢？主要是因为Proxy是拦截对象，对对象进行一个"拦截"，外界对该对象的访问，都必须先通过这层拦截。...这就是为什么 vue 2.x中检测不到对象属性的添加和删除的原因，内部提供的$set就是通过调用Object.defineProperty()去处理的。...dobjs/dob 就是用 proxy 重写 mobx 的一个方案。 immer 实现不可变数据类型。...immer 的做法就是维护一份 state 在内部，劫持所有操作，内部来判断是否有变化从而最终决定如何返回，具体内容可以看一下immer.js 简介及源码简析这篇文章。...抱歉，学会 Proxy 真的可以为所欲为 immer.js 简介及源码简析

1.5K3 0

9 个超实用的 JavaScript 原生插件工具

对浏览器中运行的任何内容进行快速可靠的测试。 Cypress允许你创建可以与单击按钮交互的测试，填写表格，这个很好地支持定期更新。...唯一的缺点是你会发现Cypress的学习曲线有点宽，因为它需要一些时间，这取决于你之前测试JavaScript应用程序的知识。此外，另一个主要问题是它目前不支持Safari。...文档也很棒，新开发人员可以在更短的时间内轻松适应day.js。 4、 immer 地址：https://github.com/immerjs/immer ? 通过改变当前状态来创建下一个不可变状态。...如果你需要记录你的个人功能，那么jsdoc是一个很好的工具。生成的文件非常基础，用于文档目的，你可以在短时间内拥有自己的功能文档。...实用的JavaScript函数式。 Ramda强调更纯粹的函数风格，不变性和无副作用的函数是其设计理念的核心，帮助你用简洁优雅的代码完成工作。

1.2K2 0

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

通过使数据不变来防止数据改变我们可以通过使共享数据不变来防止共享数据发生改变。接下来，我们将研究 JavaScript 如何支持不变性。之后，讨论不可变数据如何帮助共享可变状态。...其中流行的两种是： Immutable.js 提供了不变（版本）的数据结构，例如 List，Map，Set 和 Stack。 Immer 还支持不可变性和非破坏性更新，但仅适用于普通对象和数组。...在 D 行中，我们使用 Immutable 的内置 .equals() 方法来检查是否确实撤消了更改。 Immer 在其存储库中，Immer 库的描述为：通过更改当前状态来创建下一个不可变状态。...Immer 有助于非破坏性地更新（可能嵌套）普通对象和数组。也就是说，不涉及特殊的数据结构。...这是使用 Immer 的样子： 1import {produce} from 'immer/dist/immer.module.js'; 2 3const people = [ 4 {name

1.6K4 0

学会 Proxy 真的可以为所欲为

我们下面会写一个 enum 的函数，不过先让我们来看看他在 redux 的 action types 的应用。...测试，Mock 利用 apply 钩子，Proxy 可以检测一个函数的调用情况。下面是一个简单的，用于单元测试的 spy 库。他可以获取函数的调用次数，以及调用时的参数等。...Immutable 我们也可以利用 Proxy 在数据结构上做些操作，比如实现一个像 immer 的 Immutable 库。 import { shallowCopy } from '....nextState.name).toBe('bar') // nestState 发生了变化 expect(baseState.name).toBe('foo') // 而 baseState 保持不变...How to use JavaScript Proxies for Fun and Profit ES6 Features - 10 Use Cases for Proxy proxy-fun Proxy

4983 0

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

编写单独的useStates，然后为每个字段使用单独的更新函数是不切实际的。我们的另一个选择是hook，useReducer。我们来看一个例子。 ? 呃，不好。...您不可能为reducer中的n个表单字段编写每个用例。但是，useReducer中使用的reducer函数只是一个返回更新状态对象的普通函数。所以，我们可以做得更好。 ?...我们通过使用不那么理想的方法进行了很多关于管理复杂表单状态的讨论。让我告诉你解决方案。 ? 因此，这是处理复杂表单场景的完整源代码。...需要一个全新的数据副本，在内存中有一个新位置来触发渲染。为了绕过这个，我们使用immer，来轻松地处理Javascript对象的不变性。 ?...immer中的produce函数将对象作为其第一个参数进行处理，在我们的例子中是当前状态，它的第二个参数是一个函数，它接收对象的草稿副本以进行mutate，无论你在这个函数内修改了什么草稿状态，是在副本上完成的

3.3K2 0

React 16 - 生态：Redux

Redux 出现原因 Redux：全局只有一个唯一的 Store，负责管理整个应用程序所有的状态出发点:让组件通信更加容易 (opens new window) 特性 Single Source...：所有 Action 放一个文件，会无限扩展 Action，Reducer 分开，实现业务逻辑时需要来回切换系统中有哪些 Action 不够直观更好的组织：单个 action 和 reducer...counter: state.counter + 1 }; default: return state; } } 不可变数据 - Immutable Data 为什么采用不可变数据...'Learn React' ] }; const newState = update(state, { todos: { $push: ['Learn Redux'] } }); immer...注意，这种适合简单场景，复杂更新会有性能问题 import produce from 'immer'; const state = { filter: 'completed', todos

2872 0

关于React的Key导致的bug总结

如图所示：代码如下： import React, { useCallback } from 'react'; import { useImmer } from 'use-immer'; const.../> )) } )) } ) }; 为什么会出现如此情况呢...其实是因为使用了数组索引作为key的原因导致（eslint规则可以对此做验证来避免问题的发生），这里就不得不提react的diff算法，为什么会导致这一奇怪的”bug”呢？...为什么有diff算法在了解react diff算法之前，我们先了解一下为什么前端框架都在用diff算法。...修改后代码： import React, { useCallback } from 'react'; import { useImmer } from 'use-immer'; import { v1

6420 0

redux 文档到底说了什么（上）

虽然文档写得不怎么样，但是里面确实给了很多比较好的代码组织方式，推荐了很多很有用的工具和插件，也慢慢地理解为什么这么简单的一个状态中心可以搞出这么多概念和库。...redux 官方其实是推荐使用 immer 这个库来做 immutable 的。...安装如下： $ yarn add immer 这个库可以使得不再需要扩展运算符来造新对象、新数组，而是可以直接使用 mutable 的写法来构造新对象、新数组。...其实可以发现上面的最终版本感觉还可以，但是还不够智能，比如为什么要我自己去 normalize 数据？为什么要自己去写表驱动？...为什么要我自己去用 React.memo 和 useCallback 来做优化？为什么要我自己去装 redux-thunk 和 immer？

2K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭