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

Question

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

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

---

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

Answer 1

编写自己的深度比较器是一件微不足道的事情。即使，如果你对递归不太了解，你也可以通过重用 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}

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