我应该在任何地方使用React.PureComponent吗？

Question

React说纯渲染可以优化性能.现在React有PureComponent.我应该在任何地方使用React.PureComponent吗？或者什么时候使用React.PureComponent,哪里是使用React.PureComponent最合适的位置？

Answer 1

当组件可以重新渲染时,即使它具有相同的道具和状态,也应该使用它.一个例子是当父组件必须重新渲染但子组件props和state没有改变时.子组件可以从PureComponent中受益,因为它实际上不需要重新渲染.你不应该在任何地方使用它.每个组件实现浅层都没有意义shouldComponentUpdate().在许多情况下,它会添加额外的生命周期方法而不会让您获得任何胜利.

如果您有许多根级别组件更新而子级不需要更新的情况,它可以大大节省您的渲染时间.话虽如此,您将在根级节点中使用PureComponent获得更多收益(即PureComponent不会在叶级组件中提高整体性能,因为它只保存来自该组件的渲染).

PureComponent的一些注意事项在反应文档中得到了很好的解释.

React.PureComponent的shouldComponentUpdate()只是浅浅地比较对象.

如果您的道具更改深入嵌套对象,则可能会意外错过渲染更新.PureComponent只适用于简单的扁平物体/道具或使用类似ImmutableJS的东西来通过简单的比较来检测任何物体的变化.

此外,React.PureComponent的shouldComponentUpdate()跳过整个组件子树的prop更新.确保所有儿童组件也"纯净".

PureComponent仅在组件的渲染仅依赖于props和state时才起作用.这应该始终是反应的情况,但有一些例子需要在正常的反应生命周期之外重新渲染.为了让PureComponent按预期工作(跳过重新渲染,你真的不需要发生),PureComponent的每个后代都应该是"纯粹的"(仅依赖于props和state).

Answer 2

根据此参考，不（您不应该在任何地方使用它）：

（我在React上工作。）[...]如果我们建议在所有地方都使用PureComponent，它可能已经是默认值了。而是-决定是否应重新渲染组件的比较会花费一些钱，并且在您确实要重新渲染的情况下，浪费了所有时间检查是否应重新渲染。

相反，我们建议您注意需要在哪里进行比较。通常只在您的应用程序中的几个地方。好的候选人会出现在列表较长的子项中，或者在应用程序的大部分区域中都是独立变化的（也就是说，在您知道父母应该经常退任而孩子不应该退任的情况下）。一些适当的shouldComponentUpdate（或PureComponent）用法可以大有帮助。

-

我从Dan Abramov找到一条推文说了同样的话（2016年7月30日）。