immutable.js react shouldComponentUpdate 的最佳实现是什么

Question

我是 ImmutableJS 的新手。我的应用程序实现了大型 Redux Store 和多个 React 组件。

如有错误请指正：

我了解 Immutable 的好处是保护 Flux Store 并避免在组件上进行不必要的 vDom 渲染而获得未更改的 props。
要利用 ImmutableJS 获得更好的渲染性能，必须实施 shouldComponentUpdate()。

这个函数的最佳实现是什么？

我已经找到了它的几个实现，都使用了 shallowEqual() 并做了一些修改：

Facebook 为 React 实现了 shallowEqual，我想还有更多。
侏罗纪提供 an implementation that implements shallowEqualImmutable。它是来自 Facebook 的函数，除了 is() 函数被 ImmutableJS 给出的函数所取代。第一个等式也不一样。
Dan 用 different shalllowEqual function 实现了前两个实现的部分内容。

有人知道我应该使用哪种实现方式吗？或 none 并实施特定的 shouldComponentUpdate()？在这一点上我有点不知所措

非常感谢您的帮助！！

Answer 1

I understand that the benefits of Immutable is to protect Flux Store and to avoid unnecessary vDom rendering on component getting unchanged props.

这与 Immutable（如果你指的是库）没有真正的关系。例如，您可以在 Redux 中使用普通对象和数组，但由于 Redux 要求您永远不要改变它们，因此在大多数情况下您可以获得几乎相同的好处。因此，不可变库可以提供更好的 API 来不可变地更新事物，但如果您不改变普通对象或数组，则性能优化不需要它。

To benefit from better rendering performance with ImmutableJS, shouldComponentUpdate() must be implemented.

同样，与 ImmutableJS 并没有真正的关系，但是，要从 props 的不变性中获益，你需要实现 shouldComponentUpdate()。但是，如果你使用 Redux，你可能已经使用了 React Redux 包中的 connect()，它在大多数情况下为你实现了 shouldComponentUpdate()。所以你真的不需要为任何 connect() 编辑的组件手动编写它。

Someone knows which implementation I should use in my case? or none and implement specific shouldComponentUpdate()? I am slightly at a loss on this point

如果您没有性能问题，请不要使用任何一个。在大多数情况下，React 本身是相当高效的，在它之上的 connect() 将添加一个很好的默认实现 shouldComponentUpdate().

对于未 connect() 编辑但仍经常更新的组件，我建议您使用 react-addons-shallow-compare。它被 PureRenderMixin 内部使用，但由于 mixins 在现代 React API 中并没有真正使用，所以一个单独的函数会更方便。

如果你想要 Immutable.is 的特殊支持，你确实可以使用像 shallowEqualImmutable 这样的东西。它更好地理解不可变集合，因为它认为具有相同值的列表是相同的。在这一点上，您最好针对您的应用程序分析不同的实现，因为具体情况可能因您的用例而异。

不要过早优化，确定这是一个实际问题再解决。

Answer 2

我也在用一个大的 Redux Store，发现使用 Immutable.js 会使状态的访问变得复杂，例如 nested2.getIn(['a', 'b', 'd']) 对比 nested2.a.b.d;我真正需要的是确保我不会改变 reducer 中的状态，并且仍然能够在 shouldComponentUpdate() 方法中使用 === 检查相等性。

我已经创建了 https://github.com/engineforce/ImmutableAssign 来满足我的要求。它是一个轻量级的不可变助手，支持不可变性并允许您继续使用 POJO（普通旧 JavaScript 对象），因此我们的 React 组件可以像往常一样读取状态，例如

return newState.a.b.d === oldState.a.b.d;

示例，

var iassign = require("immutable-assign");

var o1 = { a: { b: { c: [[{ d: 11, e: 12 }], [{ d: 21, e: 22 }]], c2: {} }, b2: {} }, a2: {} };

//
// Calling iassign() to push new item to o1.a.b.c[1]
//
var o2 = iassign(
  o1,
  function (o) { return o.a.b.c[1]; },  // get property to be updated 
  function (c) {                        // update select property
    c.push(101); 
    return c; 
  }
);


// o2.a.b.c[1][1] === 101
// o1 is not modified

// o2 !== o1
// o2.a !== o1.a
// o2.a.b !== o1.a.b
// o2.a.b.c !== o1.a.b.c
// o2.a.b.c[1] !== o1.a.b.c[1]

// o2.a2 === o1.a2
// o2.a.b2 === o1.a.b2
// o2.a.b.c2 === o1.a.b.c2
// o2.a.b.c[0] === o1.a.b.c[0]
// o2.a.b.c[0][0] === o1.a.b.c[0][0]
// o2.a.b.c[1][0] === o1.a.b.c[1][0]

immutable.js react shouldComponentUpdate 的最佳实现是什么

What is the best implememtation of react shouldComponentUpdate with immutable.js

reactjs

immutable.js

redux