Immutable.js的替代品，以提高React的性能

Immutable.js alternative to boost React performance

本文关键字：React 性能 js 替代品 Immutable      更新时间：2023-09-26

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

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

更新:我有深数据树嵌入对象/数组。每个数组实体依次可能包含另一个对象/数组等等。@MatthewHerbst我看了一下你发布的链接。在我看来，这是一组没有经过测试的飞行器。此外，我不确定这些解决方案是否可以与相当深的数据树相比，在数组中嵌入数组等。

编写自己的深度比较器是一件微不足道的事情。甚至，如果你不太喜欢递归，你可以通过重用immutableJS库(我假设，你不介意在一个地方使用immutableJS)来"懒惰地"做它(使用es6语法):

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

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

  1. 编写自定义递归deepEquals。使用以下技巧:如果a===b，则a和b深度相等(不需要更多的检查，您可以立即返回true)。如果一个!==b，你必须做一个正确的递归的每个键检查)

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

代替:

myObj[newkey] = newval

使用:

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

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

另一个选择是https://github.com/engineforce/ImmutableAssign，由我创建，这是一个轻量级的不可变助手，它支持不可变性，并允许您继续使用POJO (Plain Old JavaScript Object)。因此，您可以使用===而不是深度对象比较来检查是否相等。

。

var iassign = require("immutable-assign");
var _ = require("lodash");
var o1 = { a: { c: 1 }, b: [1, 2, 3] };
var o2 = iassign(
    o1, 
    function(o) { return o.b; },   // get property to be updated 
    function(b) {                  // update select property
        return _.map(b, function(i) { return i + 1; }); 
    }
);

// o2 =  { a: { c: 1 }, b: [2, 3, 4] }
// o1 is not modified
// o2 !== o1    
// o2.b !== o1.b
// o2.a === o1.a
相关文章：