reactjs - 使用 immutable.js 进行 React shouldComponentUpdate 的最佳实现是什么

Question

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

如果我错了，请纠正我:

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

此功能的最佳实现是什么？

我已经找到了它的几个实现，所有实现都使用了shallowEqual()并进行了一些修改:

• Facebook 实现 shallowEqual对于 React 以及我想象的更多。
• Jurassix 优惠 an implementation实现 shallowEqualImmutable 。它是来自 Facebook 的函数，只不过 is() 函数被 ImmutableJS 给出的函数替换。第一个等式也不同。
• Dan 对 different shalllowEqual function 做了同样的事情实现了前两个实现的部分内容。

有人知道我应该在我的情况下使用哪种实现？或者没有并实现特定的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()ed 但仍然经常更新的组件，我建议您使用 react-addons-shallow-compare 。它由 PureRenderMixin 在内部使用，但由于 mixins 并未真正在现代 React API 中使用，因此单独的函数可能会更方便。

如果您想要对 Immutable.is 提供特殊支持，您确实可以使用类似 shallowEqualImmutable 的内容。 。它更好地理解不可变集合，因为它认为相同值的列表是相同的。此时，您最好针对您的应用程序分析不同的实现，因为具体细节可能会根据您的用例而有所不同。

不要过早优化，在解决之前确保这是一个实际问题。