开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

使用Immer和NGXS时对象仍处于冻结状态

是由于Immer和NGXS的工作原理导致的。

Immer是一个用于处理不可变数据的JavaScript库。它的核心概念是通过创建新的不可变状态来实现数据更新，而不是直接修改现有的数据。当使用Immer时，我们可以通过直接修改状态而不需要手动创建新的副本来更新数据。这种方式在一定程度上可以提高代码的可读性和开发效率。

NGXS是一个基于状态管理的JavaScript库，用于管理应用程序的状态。它通过单一的数据源来管理应用程序中的所有状态，并提供了强大的工具和模式来进行状态的变更和订阅。NGXS使用了Immer来处理状态的变更，以便确保状态的不可变性。

然而，由于Immer的工作机制，使用Immer和NGXS时对象仍处于冻结状态是正常的现象。当我们更新状态时，Immer会创建一个冻结的新状态，并将更新应用于这个新状态。这意味着原始的状态对象不会直接被修改，而是保持不变。

这种冻结状态的设计有一些优势。首先，它确保了状态的不可变性，避免了不必要的副作用和潜在的bug。其次，它使得状态的变更可追踪和可撤销，方便调试和维护。此外，通过保持原始状态的不变性，我们可以更容易地实现时间旅行和回滚到之前的状态。

对于Immer和NGXS，推荐的腾讯云相关产品是云函数（SCF）和Serverless Framework。云函数是腾讯云提供的无服务器计算服务，它可以让开发者只需编写业务逻辑代码，无需关注服务器的运维和扩展性。而Serverless Framework是一个开源的无服务器应用框架，可以帮助开发者更方便地部署、管理和调试云函数。

腾讯云云函数产品介绍：https://cloud.tencent.com/product/scf Serverless Framework产品介绍：https://serverless.com/

相关搜索:为什么csv DictReader字典对象仅在文件仍处于打开状态时才起作用？使用带有等待的任务扩展方法时，异步操作仍处于挂起状态使用异步OnActionExecuting时:在异步操作仍处于挂起状态时完成的异步模块或处理程序使用来自四个不同select标记的值更新处于状态的对象时出现问题如何使用onChange和setState()将事件目标推送到处于状态的数组中的对象我正在使用javaFX 8，我想要一种在子窗体仍处于打开状态时阻止用户访问父窗体的方法更改基于asc和dsc的图标，并将其他列图标保留为使用angular8时处于非活动状态的默认asc图标双11声音克隆有折扣吗双11语音复制有折扣吗双11语音定制有折扣吗

相关搜索:

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

有帮助

没帮助

相关·内容

Immer使用指南

2.Immer能避免对不可变对象进行深度更新时，所需要的常规手动拷贝代码的实现如果没有Immer，对象副本需要在每一级上手工创建其副本，通常通过使用很解构操作(…obj)操作。...当使用Immer时，只需要对 draft对象进行更改，draft对象会先记录用户的修改，然后仅创建有变更的必要的属性副本，不会影响原始对象。...3.在使用Immer时，您不需要额外学习专用的api或数据结构，使用普通的JavaScript数据结构并使用常规方式修改数据即可，操作简单且安全。为什么要使用Immer？...同时， produce 对其对象的冻结也避免了其在此后的操作中被意外修改的可能性。 Immer 就像是一个私人助理。助理拿着一封信(当前状态)，给你一份草稿纸，让你在上面写你想要做的修改。...当访问 draft 时，其定义的 getter 会返回一个 Proxy 代理对象。如果在 draft 中没有值的变更或者变更值和原对象一致，则返回原对象。

1.7K2 0

精读《Immer.js》源码

了解 mobx 的同学可能会发现，Immer 就是更底层的 Mobx，它将 Mobx 特性发扬光大，得以结合到任何数据流框架，使用起来非常优雅。...2 概述麻烦的 Immutable Immer 想解决的问题，是利用元编程简化 Immutable 使用的复杂度。...代理懒初始化就是要解决这个问题，当访问到 draft.a 时，自定义 getter 已经悄悄生成了新的针对 draft.a 对象的代理 draftA，因此 draft.a.x 相当于访问了 draftA.x...最后返回的对象是由 base 的一些属性（没有修改的部分）和 copy 的一些属性（修改的部分）最终拼接而成的。...最后使用 freeze 冻结 copy 属性，将 finalized 属性设置为 true。

6323 0

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

2KB 不可变日期和时间库。在JavaScript 中，你最有可能使用日期和时间库构建应用程序，而days.js是Moment.js的绝佳替代品。因为它更轻巧并且具有所有相同的 API。...4、 immer 地址：https://github.com/immerjs/immer ? 通过改变当前状态来创建下一个不可变状态。...该文档对于新开发人员来说也很棒且易于使用，并且在开始使用jsdoc时不需要太多经验。特别是如果你在团队中工作，它会提高你工作流程的整体生产力，因为你已经定义了自己的功能。...如果你正在使用 Angular 应用程序，建议使用 Akita，因为与ngrx和ngxs相比，它更容易。...这个库使代码在处理 cookie 时更加清晰和可用，你可以使用一个简单的 API 来管理 cookie，其中包括开发人员需要的一切。

1.2K2 0

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

，以及一个修改传入状态的函数，在修改状态的函数中，所有标准的JavaScriptAPI都可以用于draft（草稿）对象，然后返回一个新的状态，但是原始的状态不会受到影响。...以前面修改表单配置的方法为例，使用Immer我们上面的状态修改就可以这样写： import {produce} from "immer" setFormConfig(prevState => {...提供的produce方法，可以直接像深拷贝那样，在新对象上做修改更重要的是，在 immer 的背后做了性能优化，而不是简单的全部深度拷贝，所以不用担心性能问题 Immer 的优点 Immer有着许多便捷和性能上的优势...：遵循不可变数据范式，同时使用普通的JavaScript对象、数组、集合和映射，上手即用开箱即用的结构共享开箱即用对象冻结更新轻而易举冗余代码更少对JSON补丁的一流支持仅有3KB Immer...工作原理当我们调用 immer 的 API produce时，immer 将内部暂时存储着我们的目标对象（以 state 为例） immer 暴露一个 draft （草稿）给我们我们在 draft

8134 1

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

limu面向现代浏览器而设计，只考虑支持Proxy的运行环境，使用了读时浅复制写时标记更新的机制来达到让用户像操作原始数据一样操作可变数据，操作过程中始终只为读取节点生成代理对象返回给用户，读取后父子节点间直接用浅克隆节点相连...} 那么在操作草稿结束时，levelScopes操作力需要通过delete关键字来移除这些多余的数据，此种方式带来的不便就是打印数据时看到一个很刺眼的LIMU_META属性在对象中，给用户造成了一种污染数据的心里负担...symbol藏匿私有属性和使用重建原型链达到提升私有属性到原型链上且不污染原型链的效果。...和native pstr使用JSON.parse和JSON.stringify来模拟immer的produce // code of pstr exports.createDraft = function...在不冻结各种场景的性能测试结果已和structura、mutative平起平坐，在冻结场景领先structura、mutative1到2倍，现如今可宣称limu到达了不可变数据性能之。

2141 0

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

::: Immer 使得在 React 中使用不可变数据更加容易，通过提供简洁的 API 和直观的语法，以可变的方式更新不可变数据。...而使用 Immer，可以通过直接在原始状态上进行修改，以一种可变的方式更新状态。...React 中使用 Immer ，可以避免手动编写深度克隆、合并对象或数组的代码，同时还能保持数据的不可变性，方便进行状态管理和追踪变更。...它接收当前状态 state 和表示要进行的更改操作的回调函数。我们可以在回调函数中对 draft 对象进行更改，Immer 会自动处理状态的更新。...# 总结在使用 React 组件时，可以使用 produce 函数来更新状态，而在使用 Redux 时，可以在 reducer 中使用 produce 函数来进行状态更改操作。

8062 0

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

鉴于我们希望对象是完全不变的，因此在本文中仅使用 Object.freeze()。浅层冻结 Object.freeze(obj) 仅冻结 obj 及其属性。...其中流行的两种是： Immutable.js 提供了不变（版本）的数据结构，例如 List，Map，Set 和 Stack。 Immer 还支持不可变性和非破坏性更新，但仅适用于普通对象和数组。...在 D 行中，我们使用 Immutable 的内置 .equals() 方法来检查是否确实撤消了更改。 Immer 在其存储库中，Immer 库的描述为：通过更改当前状态来创建下一个不可变状态。...这是使用 Immer 的样子： 1import {produce} from 'immer/dist/immer.module.js'; 2 3const people = [ 4 {name...致谢 Ron Korvig 提醒我在 JavaScript 中进行深拷贝时使用静态工厂方法，而不要重载构造函数。

1.6K4 0

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

永远不必再考虑 React 状态管理了，仅仅 200 字节的状态管理解决方案。卡颂注：用React的同学可以去了解下unstated和unstated-next。...一个用于将 immer 作为 React hook 来操纵状态的 hook。 use-immer 可以将 state 数据 immutable，更新深层嵌套数据更为方便，且有函数编程的感觉。...每次只有一个激活的modal和选中的数据一一对应，两者都是用操作的一瞬间确定的，且每次只有一个 modal 处于激活状态，所以用户的各种操作只是不断更新modal和data而已。...在使用modal的页面中，我们只需不断去更新全局记录值，当modal关闭时只需全局记录值置为空即可。这样在当前的页面中不需要再将烦人的众多modal一次次的引入，也不需要维护一系列的visible。...Provide 负责传递共享的数据，useContext 负责消费数据，这里的消费包括使用、更新和删除等操作。

1.5K1 0

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

假设 React 组件有这样一个状态： this.state = { a: { b: 1 } } 我们这样修改了它的状态： this.state.a.b = 2; this.setState...你会看到调用 useState 的 setXxx 时，React 会判断上次的 state 和这次的 state，如果一样，那就不会渲染，直接 return 了。...这样写： immer 这样写：没有对比就没有伤害，从使用体验上，immer 完胜。...immer 只有一个 produce api，传入原对象和修改函数，返回的就是新对象，使用新对象就是普通 JS 对象的用法。...从使用体验上来说，不管是和 react 的 setState 结合还是和 redux 的 reducer 结合，都是 immer 完胜，但是 immutable 因为有专用数据结构的原因，在有大 state

4342 0

redux你用对了吗？

使用纯函数来执行修改: 为了描述 action 如何改变 state tree ，你需要编写 reducers 关于第一点很容易理解，整个应用应当只有一个 store，全局唯一的 store 有利于更好的管理全局的状态...函数的输出和输入值以外的其他隐藏信息或状态无关，也和由I/O设备产生的外部输出无关。该函数不能有语义上可观察的函数副作用，诸如“触发事件”，使输出设备输出，或更改输出值以外物件的内容等。...，所以，当 reducer 函数直接返回旧的 state 对象时，这里的浅比较就会失败，redux 认为没有任何改变，从而导致页面更新出现某些意料之外的事情。...如果你的工程使用的是dva，那么可以直接开启 dva-immer，就可以简化 state 的写法。...immer 库来改进我们的 reducer 写法：安装： yarn add immer 使用： import produce from "immer"; const reducer = (state

5783 0

150 行代码，手搓一个 Immer

根节点预先创建一个 Proxy，对象树上被访问到的所有中间节点（或新增子树的根节点）都要创建对应的 Proxy 而每个 Proxy 都只在监听到写操作（直接赋值、原生数据操作 API 等）时才创建拷贝值...（包括 Symbol 属性名和字符串属性名）整合要想把拷贝值与原值整合起来，先要建立两种关系：代理与原值、拷贝值的关联：根节点的代理需要将结果带出来下层拷贝值与祖先拷贝值的关联：拷贝值要能轻松对应到结果树上...original, producer) { const draft = proxy(original); // 修改draft producer(draft); // 取出draft内部状态...与正版相比，实现方案上有两点差异：创建代理的方式不同：imer 使用new Proxy，immer 采用Proxy.revocable() 整合方案不同：imer 反向构建拷贝值树，immer 正向遍历代理对象树...通过Proxy.revocable()创建的 Proxy 能够解除代理关系，更安全些而 Immer 正向遍历代理对象树也是一种相当聪明的做法： When the producer finally ends

8971 0

React 组件优化

使用 useReducer hook useReducer 是 useState 的替代品，它可以更好的管理组件的状态。...工具库在编写 react + redux 应用时，reducer 中的 state 如果是一个引用类型，比如数组或者对象，当往数组中 push 新的项时，我们必须要克隆一份才行，如果不克隆，react...; useImmer useImmer 是一个 React Hook，使用时需要先下载： npm install immer use-immer -S use-immer 包有两个 Hook：useImmer... 组件比较复杂，在构建 Formik 表单程序时，Formik 和下面它的几个属性是需要设置的： initialValues 接收一个对象，表示初始化的表单控件的值，对象的键应是表单的...在 Formik 官网，作者也举例了使用 redux-form 的缺陷：表单状态本质上是短暂的和局部的，并不需要 redux 对其进行跟踪；使用 redux 管理状态时，状态更新要派发 action

7.2K2 0

前端基建规范参考

状态管理器优化和统一 # 3.1 优化状态管理用react的context封装了一个简单的状态管理器，有完整的类型提升，支持在组件内和外部使用，也发布到?...在请求异常的时候不返回Promise.reject()，而是返回一个对象，只是 code改为异常状态的code，这样在页面中使用时，不用用try/catch包裹，只用if判断code是否正确就可以。...引入 immer 来优化性能和简化写法 ?...使用immer后,age没变时不会生成新的引用，同时语法也更简洁，可以优化性能。...，不能在原先的引用上进行修改，所以在对引用类型对象或者数组做操作时，总要浅拷贝一下，再来做处理，当修改的状态层级比较深的时候，写法会更复杂。

2303 0

WPF性能优化：Freezable 对象

Freezable是WPF中一个特殊的基类，用于创建可以冻结（Freeze）的可变对象。冻结一个对象意味着将其状态设置为只读，从而提高性能并允许在多线程环境中共享对象。...那是不是WPF中的所有资源都可以（需要）使用Freeze方法冻结来提高性能呢？ Freezable类通常用于WPF中的资源和动画，例如创建可重用的画刷、几何图形和动画。...即使实际上并未修改图形系统对象，系统仍必须消耗一些资源来监视该对象，以防更改它。例如，假设创建一个SolidColorBrush画笔并用它来绘制按钮的背景。...尽管使用纯色画笔来描述按钮的绘制方式，但纯色画笔实际上并没有进行绘制。图形系统为按钮和画笔生成快速、低级别的对象，实际显示在屏幕上的就是这些对象。如果要修改画笔，则必须重新生成这些低级别对象。...由于无法对冻结的Freezable进行动画处理，因此使用Storyboard对其进行动画处理时，动画系统会自动创建冻结的Freezable对象的可修改克隆。

3293 0

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

检测不到对象属性的添加和删除：当你在对象上新加了一个属性newProperty，当前新加的这个属性并没有加入vue检测数据更新的机制(因为是在初始化之后添加的)。vue....，目前处于Alpha版本。...无论访问对象的什么属性，之前定义的还是新增的，它都会走到拦截中，举个简单的下面分别用Object.defineProperty()和 Proxy实现一个简单的数据响应使用Object.defineProperty...都是使用到了对对象进行读写拦截，在读写中做一些额外的判断和操作。总结 Proxy是用来操作对象的，Object.defineProperty() 是用来操作对象的属性的。...vue3.0 用 Proxy 是对对象进行拦截操作，无论是对对象做什么样的操作都会走到 Proxy 的处理逻辑中 vue3.0、dobjs/dob、immer等库目前都使用到了 Proxy，对对象进行读写拦截

1.5K3 0

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

1：该对象没有_path和_value属性，因此是一个普通的更新对象，就可以像使用this.setState一样。...因此，您可以使用包含要更新的状态片段的新对象调用updateState，并将其与旧状态合并并返回新状态。...2：对象具有_path和_value属性 - 当使用具有这两个属性的对象作为参数，调用更新回调函数时。我们将此视为一种特殊情况，其中_path表示嵌套的字段路径。...为了绕过这个，我们使用immer，来轻松地处理Javascript对象的不变性。 ?...immer中的produce函数将对象作为其第一个参数进行处理，在我们的例子中是当前状态，它的第二个参数是一个函数，它接收对象的草稿副本以进行mutate，无论你在这个函数内修改了什么草稿状态，是在副本上完成的

3.3K2 0

冻结计划

查询计划是在准备SQL语句时创建的。默认情况下，添加索引和重新编译类等操作会清除此查询计划。下次调用查询时，将重新准备查询并创建新的查询计划。冻结计划使可以跨编译保留(冻结)现有查询计划。...当在比最初创建计划时使用的InterSystems软件版本更新的InterSystems软件版本下准备/编译查询时，会发生这种自动冻结。...例如，如果从语句PLAN使用的类中删除了索引：该声明的计划仍处于冻结状态。在“SQL语句详细信息”页上，“编译设置”区域显示“计划错误”字段。...在SQL语句详细资料页上，查询计划区域显示由于冻结计划中的错误而无法确定计划。如果在冻结计划处于错误状态时重新执行查询，则InterSystems IRIS不使用冻结计划。...在计划解冻或修改定义以使计划返回有效状态之前，出错的计划将一直处于错误状态。如果修改定义以使计划返回有效状态，请转到SQL语句详细资料页，然后按清除错误按钮以确定是否已更正错误。

1.8K1 0

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

如果是函数，则入参为旧状态，输出新的状态。否则直接作为新状态。这个符合 setState 的使用方法。使用对象拓展运算符，返回新的对象，保证原有数据不可变。...我们可以使用 use-immer[1] useImmer(initialState) 非常类似于 useState。...该函数返回一个元组，元组的第一个值是当前状态，第二个是 updater 函数，它接受一个 immer producer 函数或一个值作为参数。...这更符合我们的使用习惯，可以通过 draft.xx.yy 的方式更新我们对象的值。 useBoolean 和 useToggle 这两个都是特殊情况下的值管理。...其原理，是每次状态变更的时候，比较值有没有发生变化，变更状态：维护两个状态 prevRef（保存上一次的状态）和 curRef（保存当前状态）。

9111 0

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

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

1.4K3 0

放弃Redux吧，转投Zustand吧

它提供了一种简单的 API，使得开发者能够轻松地在应用程序中的任何地方访问和修改状态。使用 Zustand，开发者可以通过创建一个 store 来存储和管理应用程序的状态。...}) // 当不再需要监听时，取消订阅 unsubscribe() 清理和销毁 store 在某些情况下，你可能需要清理或销毁 store。...const store = useStore() // 当组件卸载时，清理 store store.destroy() 使用自定义钩子你可以创建自定义钩子来封装 store 的某些操作，使得在组件中使用更加方便...持久化配置项 persist 中间件接受一个配置对象，你可以在这个对象中定义持久化的行为： key: 存储在 localStorage 或 sessionStorage 中的键名。...// 状态和操作 }) ) ) 通过使用 Zustand 的持久化插件，你可以轻松地将状态保存在客户端存储中，从而提供更好的用户体验和更健壮的应用程序状态管理。

4241 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭