重新匹配immer插件是否可以像immer使用setAutoFreeze(true/false)那样控制自动冻结开关？

immer插件是一个用于JavaScript的不可变数据结构库，它可以帮助开发人员更轻松地处理不可变数据。immer插件本身并不提供类似setAutoFreeze(true/false)的控制自动冻结开关的功能。

自动冻结是immer库的一个特性，它可以在修改不可变数据时自动冻结对象，以确保数据的不可变性。默认情况下，immer会自动冻结对象，以防止意外修改。如果需要手动控制自动冻结的开关，可以通过修改immer库的源代码来实现。

然而，修改库的源代码并不是一个推荐的做法，因为这样做可能会导致不可预测的行为，并且会使代码难以维护和升级。如果你需要更精细地控制自动冻结的行为，建议使用其他支持这一功能的库或自行实现。

总结起来，immer插件本身不提供类似setAutoFreeze(true/false)的控制自动冻结开关的功能，如果需要更精细地控制自动冻结的行为，建议使用其他支持这一功能的库或自行实现。

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

有帮助

没帮助

相关·内容

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

Immer可以帮助我们更方便的处理不可变的状态。...以前面修改表单配置的方法为例，使用Immer我们上面的状态修改就可以这样写： import {produce} from "immer" setFormConfig(prevState => {...= newName })) 是不是瞬间感觉非常的清爽，我们通过Immer提供的produce方法，可以直接像深拷贝那样，在新对象上做修改更重要的是，在 immer 的背后做了性能优化，而不是简单的全部深度拷贝...，所以不用担心性能问题 Immer 的优点 Immer有着许多便捷和性能上的优势：遵循不可变数据范式，同时使用普通的JavaScript对象、数组、集合和映射，上手即用开箱即用的结构共享开箱即用对象冻结...的使用方法，希望对你有用，当然，如果可以的话不妨点个赞再走呢，这对我很重要。

9024 1

Immer使用指南

如果不使用 Immer 我们将不得不小心翼翼地浅层复制状态结构的每一层，这将取决于我们的手工操作是否仔细。...第二个参数是我们传递一个名为 recipe 的函数该函数自动传入了一个 draft 对象作为参数，我们可以直接修改该 draft 对象。...= true; draft.push({ title: 'Tweet about it' }); }); 很显然，使用 immer 之后，相比于之前手工实现简单了不少，失误的可能性更低了。...冻结对象，不会被轻易改变。 4. 深度更新轻而易举，不需要人工考虑其数据结构会被影响或者遗漏。 5. 使用简单，能使代码更简洁。 6. 对JSON补丁的一流支持 7....React 的 state 本身是不可修改的，当你需要修改它的某个属性然后保存为新的状态的时候，使用 immer 可以很方便的获得一个新的 state。 2.

1.7K2 0

精读《Immer.js》源码

2 概述麻烦的 Immutable Immer 想解决的问题，是利用元编程简化 Immutable 使用的复杂度。...如果 js 原生支持 Immutable，就可以直接使用 push 了！...生成 Immutable 对象当执行完 produce 后，用户的所有修改已经完成（所以 Immer 没有支持异步），如果 modified 属性为 false，说明用户根本没有改这个对象，那直接返回原始...最后使用 freeze 冻结 copy 属性，将 finalized 属性设置为 true。...源码读到这里，发现 Immer 其实可以支持异步，只要支持 produce 函数返回 Promise 即可。

6483 0

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

limu面向现代浏览器而设计，只考虑支持Proxy的运行环境，使用了读时浅复制写时标记更新的机制来达到让用户像操作原始数据一样操作可变数据，操作过程中始终只为读取节点生成代理对象返回给用户，读取后父子节点间直接用浅克隆节点相连...倍以上（3.12之前数据为4倍左右）代码结构简洁由于只考虑支持Proxy，代码设计没有历史包袱，可以专注于数据读写、代理生成、冻结实现等不可变数据的核心场景，利于后期升级和扩展更多面向现代浏览器标准的特性...和native pstr使用JSON.parse和JSON.stringify来模拟immer的produce // code of pstr exports.createDraft = function...测试代码编写为了测试复杂数据读写，会做多个深层次读并写的操作，同时增加operateArr控制是否便利数组做操作，部分示意代码如下： runPerfCase({ loopLimit: 1000,...执行npm run s1，表示不操作草稿数组，结果不冻结，结果如下 loop: 1000, immer avg spend 13.19 ms loop: 1000, limu avg spend 0.488

2261 0

放弃Redux吧，转投Zustand吧

其实可以使用状态管理来管理全局的主题样式，然后再配合zustand的持久化插件persist来实现一键换肤的功能，这样刷新之后也不会丢失状态了 persist持久化的用法 Zustand 的持久化插件是一个强大的功能...如何使用持久化插件要使用 Zustand 的持久化功能，你需要先从 zustand 库中导入 persist 中间件。然后，你可以将这个中间件应用到你的 store 创建函数中。..., // 是否在控制台输出调试信息 } ) ) // 现在你可以在组件中使用 useSettingsStore 钩子来访问和修改状态 // 状态变化后，它将自动保存到 localStorage...debug: 一个布尔值，如果设置为 true，则会在控制台输出额外的调试信息。自定义持久化中间件如果你需要更细粒度的控制或者想要创建自己的持久化逻辑，你可以通过创建自定义中间件来实现。...// 状态和操作 }) ) ) 通过使用 Zustand 的持久化插件，你可以轻松地将状态保存在客户端存储中，从而提供更好的用户体验和更健壮的应用程序状态管理。

4781 0

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

你会发现它先对比了两个值是否相等，如果不相等的话，再取出 key 来，对比每个 key 的值是否相等。...那如果像修改一个层数比较深的值，但希望返回的值是整个对象的新的 immutable 结构呢？可以用 setIn：这样修改了任意属性之后，都能拿到最新的对象，这不就完美解决了我们的痛点问题么？...这样写： immer 这样写：没有对比就没有伤害，从使用体验上，immer 完胜。...而 immer 没有自己的数据结构，它只是通过 Proxy 实现了代理，内部自动创建新的对象：只不过是把手动创建新对象的过程通过代理给自动化了：所以从性能上来说，如果有特别大的 state 的话...immer 只有一个 produce api，传入原对象和修改函数，返回的就是新对象，使用新对象就是普通 JS 对象的用法。

4432 0

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

在别的地方使用时，要去重新实现，是一种模式。而 reactvity api 可以直接作为 library 来用。...既像 vue 那样可以用 js 赋值操作，又像 react-hooks 那样的形式，还像 cycle.js 一样在组件内部可以操作 reactive value。它怎么做到自动更新视图的呢？...看起来像下面那样。 ? 只支持一个 counter，看起来可能是一个特例，我们可以再实现一个 todo list。 ?...整体看上去像下面那样。 ? 可以看到，我们从未调用 setState/setValue 等触发函数，只用到了原生 js 的方法和赋值操作。...useReactive 在内部构造 reactive value/state，watch 它，然后使用 resumable enhancer 提供的 resume 方法，触发重新执行。 ?

1.5K1 0

前端基建规范参考

== obj2[key]) return false } return true } # 3.2 store 目录结构 ├─src # 项目目录 │ ├─store...本地存储统一管理可以对localStorage和sessionStorage还有cookie简单封装一下，封装后使用的好处：自动序列化，存储的时候转字符串，取得时候再转回来。...在请求异常的时候不返回Promise.reject()，而是返回一个对象，只是 code改为异常状态的code，这样在页面中使用时，不用用try/catch包裹，只用if判断code是否正确就可以。...Immer 是 mobx 的作者写的一个 immutable 库，核心实现是利用 ES6 的 Proxy(不支持Proxy的环境会自动使用Object.defineProperty来实现)，几乎以最小的成本实现了...使用immer后,age没变时不会生成新的引用，同时语法也更简洁，可以优化性能。

2663 0

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

，新增的属性，并不需要重新添加响应式处理，因为 Proxy 是对对象的操作，只要你访问对象，就会走到 Proxy 的逻辑中。...immer 实现不可变数据类型。...immer 的做法就是维护一份 state 在内部，劫持所有操作，内部来判断是否有变化从而最终决定如何返回，具体内容可以看一下immer.js 简介及源码简析这篇文章。...vue3.0 用 Proxy 是对对象进行拦截操作，无论是对对象做什么样的操作都会走到 Proxy 的处理逻辑中 vue3.0、dobjs/dob、immer等库目前都使用到了 Proxy，对对象进行读写拦截...抱歉，学会 Proxy 真的可以为所欲为 immer.js 简介及源码简析

1.5K3 0

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

鉴于我们希望对象是完全不变的，因此在本文中仅使用 Object.freeze()。浅层冻结 Object.freeze(obj) 仅冻结 obj 及其属性。...deepFreeze() 是否真的冻结了： 1const teacher = { 2 name: 'Edna Krabappel', 3 students: ['Bart'], 4};...在 D 行中，我们使用 Immutable 的内置 .equals() 方法来检查是否确实撤消了更改。 Immer 在其存储库中，Immer 库的描述为：通过更改当前状态来创建下一个不可变状态。...这是使用 Immer 的样子： 1import {produce} from 'immer/dist/immer.module.js'; 2 3const people = [ 4 {name...我们假设这个变量是 people，并使用通常会进行破坏性更改的操作。Immer 拦截了这些操作。代替变异draft，它无损地改变 people。结果由 modifiedPeople 引用。

1.6K4 0

精读《重新思考 Redux》

本周精读内容是《重新思考 Redux》。 1 引言《重新思考 Redux》是 rematch 作者 Shawn McKay 写的一篇干货软文。...这篇文章的宝贵之处在于，抛开 Mobx、RXjs 概念，仅针对 redux 做深入的重新思考，对大部分还在使用 redux 的工程场景非常有帮助。...，不但可以用自动跳转代替字符串搜索，还能校验参数类型，在 redux 框架中非常难得。...内置了比较多的插件 rematch 将常用的 reselect、persist、immer 等都集成为了插件，相对比较强化插件生态的概念。...比如 rematch-immer 插件，可以用 mutable 的方式修改 store： const count = { state: 0, reducers: { add(state)

4522 0

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

我们可以使用 use-immer[1] useImmer(initialState) 非常类似于 useState。...状态变更的时候，使用 shouldUpdate 判断是否发生变化，默认通过 Object.is 判断。开发者可以自定义 shouldUpdate 函数，并决定什么时候记录上一次状态。...重新通过 requestAnimationFrame 去控制 setState 的执行时机。另外在页面卸载的时候，会直接取消操作，避免内存泄露。...= false; // 如果已经卸载，则会执行 return 中的逻辑 return () => { unmountedRef.current = true; };...参考资料 [1] use-immer: https://github.com/immerjs/use-immer

9361 0

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

虽然文档写得不怎么样，但是里面确实给了很多比较好的代码组织方式，推荐了很多很有用的工具和插件，也慢慢地理解为什么这么简单的一个状态中心可以搞出这么多概念和库。...redux 官方其实是推荐使用 immer 这个库来做 immutable 的。...安装如下： $ yarn add immer 这个库可以使得不再需要扩展运算符来造新对象、新数组，而是可以直接使用 mutable 的写法来构造新对象、新数组。...handler(todos, action) : todos } 使用了 immer 之后，数组的 push 和直接赋值写法都可以直接用了，代码就感觉更好看一些。...第十版：添加 dev tools redux dev tools 是一个 Chrome 插件，可以方便地帮助我们追踪每次 store 的变化。

2K2 0

前端反卷计划-组件库-01-环境搭建

q=curry-design图片从结果可以看到，这个名字没有其他包在用，所以我可以使用这个名字作为组件库的包名。如果你起的名字，在npm里面查询到，则需要换个名字。...// 在这里添加你的自定义规则 'no-unused-vars': 'off', // 关闭未使用的变量检查，可以根据需要启用 '@typescript-eslint/no-unused-vars...display-name': 'off', // 关闭组件名称的检查，如果你不需要 }, settings: { react: { version: 'detect', // 自动检测...括号内部不要出现空格 bracketSpacing: true, // 行结束符使用 Unix 格式 endOfLine: 'lf', // true: Put > on the last line...preserve', // 分号 semi: false, // 使用单引号 singleQuote: true, // 缩进 tabWidth: 2, // 使用 tab 缩进 useTabs

2573 0

成为一名高级 React 需要具备哪些习惯，他们都习以为常

例如，可以用 usestate跟踪复选框是否被选中，或者跟踪文本输入的值。话虽如此，当状态更新变得稍微复杂时，您应该使用一个reducer。...你可以在useState中使用Immer，但我不认为很多人会这样做。编写单元测试开发人员都是很忙的人，编写自动化测试非常耗时。...如果你没有使用React Hooks ESLint插件，你会很容易错过你的效果的一个依赖项，导致一个效果不能像它应该的那样经常运行。这个很容易修复——只需使用ESLint插件并修复警告。...虽然flexbox一开始可能有些吓人，但它是一个多功能的、功能强大的工具，您可以使用它创建几乎所有日常开发中需要的布局。这就涵盖了坏习惯!看看你是否犯了这些错误，并努力改进。...虽然像Next.js这样的框架使SSR变得更容易，但仍然不可避免地存在必须处理的复杂性。如果您需要使用SSR进行SEO或在移动设备上快速加载，那么请务必使用它。

4.7K4 0

【React】211- 2019 React Redux 完全指南

安装 Immer 在 reducers 里面使用也是一种很好的方式。Immer 让你可以像写普通 mutable 代码一样，最终会自动生成 immutable 代码。点击了解如何使用 Immer。...但不是自动的。我们需要在我们的组件使用 connect 函数来访问 store。 React-Redux Provider 工作机制 Provider 可能看起来有一点点像魔法。...这是另一层的抽象，如果你不想在你的应用里面使用，那也没关系。不过我还是会解释下它们是什么。然后你可以决定你是否有时/总是/绝不想使用它们。...它是个中间件，基本是 Redux 的一个插件，它可以使 Redux 处理像上面 getUser() 那样的 actions。...开始请求时把 loading 标志设为 true，失败或者完成时设为 false。

4.2K2 0

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

redux-thunk 来做异步，手动返回函数手动使用表驱动来替换 reducer 的 switch-case 模式手动将 selector 进行封装成函数手动引入 immer，并使用 mutable...只要将 devTools: true 就可以直接使用。..., tip: ''})) return response } ) 可以发现使用 createSlice 的另一个好处就是可以直接获取 action，不再需要每次都引入常量，不得不说，使用字符串来...注意：createSlice 里的 reducer 里可以直接写 mutable 语法，这里其实是内置了 immer。...这个 selector 其实就是依赖了 todos 和 filter 嘛，那能不能实现 useCallback 那样，只要 todos 和 filter 不变，那就不需要 todos.filter(..

7832 0

1.2K1 0

写在 2021: 值得关注学习的前端框架和工具库

是否难以忍受为了自动重启还需要为nodemon配置ts-node作为执行？...进行缓存控制）。...在TS中这个工具的主要能力就是生成TS的类型定义，同时它的插件体系还提供了更多的额外能力，如Apollo-Client的插件，让你可以直接使用封装好的的useXXXQuery等，前端连查询语句都不用写了...但我只是比较简单的使用过，用于和TypeGraphQL一起实现自定义指令，详见这里[52] Engine GraphQL Engine其实是一个非常神奇的方向，有点像REST那边的各种自动生成REST...PostGraphile[54]，只支持PostgreSQL，优势在于性能与插件系统来实现高度定制，还提供了数据库工具。和Hasura一样能自动基于级联关系生成CRUD操作，同样提供了企业级支持。

4.2K1 0

关于React的Key导致的bug总结

其实是因为使用了数组索引作为key的原因导致（eslint规则可以对此做验证来避免问题的发生），这里就不得不提react的diff算法，为什么会导致这一奇怪的”bug”呢？...这里这里为了找寻问题，我们尝试把input替换成了span标签，结果操作又不会发生上述情况了，是否很疑惑刚刚说是因为key原因导致，但是修改为展示组件却没问题，而使用input就不行呢？...然后来到ajax时代，前端独立交互初现，这个时候我们更改页面中的某个值时我们使用jquery获取到要修改的dom然后进行修改、删除、移动，如果现在再来看，这些操作可以比喻成我们自己手动进行了diff算法...而我们希望每次只修改了一个cell，就是只重新渲染修改的cell，虽然现在我们使用了uuid做为Key使得组件得以复用，但是因为没有对props进行对比导致组件重新渲染。...延伸上面我们说到key的作用，在实际项目中我们常用于列表渲染才使用key，既然我们了解到key可以作为react的标识，也就是可以通过key来做一些优化。

6700 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云