javascript - 用于提升 React 性能的 Immutable.js 替代方案

标签 javascript reactjs immutable.js

Immutable.js除了它的不可变性之外,还提供了深度数据结构比较。 它允许提高 React 渲染性能,因为允许轻松实现 shouldComponentUpdate 方法或使用 react-immutable-render-mixin .

但是,我只需要深入比较。有没有不用Immutable.js的深度数据结构比较的解决方案?


更新:我有包含嵌入式对象/数组的深层数据树。每个数组实体又可能包含另一个对象/数组等等。 @MatthewHerbst 我查看了您发布的链接。这对我来说是一组未经测试的车辆。此外,我不确定该解决方案是否可以与相当深的数据树进行比较,在数组中嵌入数组等。

最佳答案

编写自己的深度比较器是一件微不足道的事情。即使,如果你对递归不太了解,你也可以通过重用 immutableJS 库来“懒惰”地完成它(我假设,你不介意只在一个地方使用 immutable.js)(使用 es6 语法):

const deepEquals = (a, b) => immutable.is(immutable.fromJS(a), immutable.fromJS(b))

但是,由于显而易见的原因,此解决方案效率不高。如果您关心性能(但出于某种原因您仍然不喜欢 immutable.js),您可以使用以下方法:

  1. 编写自定义递归 deepEquals。使用以下技巧:如果 a===b,则 a 和 b deepEquals(不需要更多检查,您可以立即返回 true。如果 a!==b,您必须对每个键进行适当的递归检查)

  2. 在你的代码中,尽可能避免改变(这样上面的技巧就会尽可能频繁地生效)。这意味着,

代替:

myObj[newkey] = newval

使用:

let modifiedA = {...myObj, newkey: newval}

这样,创建映射(和数组)的修改版本会花费更多时间,但比较会更快(特别是,如果你的数据结构相当嵌套,但你的单个映射/数组没有很多直接键)

关于javascript - 用于提升 React 性能的 Immutable.js 替代方案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32742914/

相关文章:

css - 如何在 React Native 中做最后一个子选择器?

javascript - 不能在交集类型交集的任何成员上调用方法 - Flow|React|Immutable

reactjs - React + Redux + Immutable - 不可变对象(immutable对象)应该有多深?

javascript - Angular 9->10 迁移。 TypeError : core_1. virtualFs.createSyncHost 不是函数

javascript - 具有必需属性的vuejs-datepicker被提交但没有值(value)

javascript - 检测插件是否已应用

JavaScript:为什么 boolean 值的按位或返回数字而不是 boolean 值?

javascript - 使用 webpack 转译 ES6 模块后,模块未导出

javascript - 子菜单不适用于 ReactJs 中的多个项目?

react-redux - Immutable.js - TypeError : get(. ..).toJS 不是函数