我应该在任何地方使用React.PureComponent吗？ [英] Should I use React.PureComponent everywhere?

问题描述

React说纯渲染可以优化性能。
现在React有PureComponent。
我应该在任何地方使用React.PureComponent吗？
或何时使用React.PureComponent以及使用React.PureComponent的最合适的位置？

React says pure render can optimize performance. And now React has PureComponent. Should I use React.PureComponent everywhere? Or when to use React.PureComponent and where is the most proper postion to use React.PureComponent?

推荐答案

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

You should use it when a component could re-render even if it had the same props and state. An example of this is when a parent component had to re-render but the child component props and state didn't change. The child component could benefit from PureComponent because it really didn't need to re-render. You shouldn't necessarily use it everywhere. It doesn't make sense for every component to implement the shallow shouldComponentUpdate(). In many cases it adds the extra lifecycle method without getting you any wins.

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

It can drastically save you rendering time if you have many cases where root level components update while the children do not need to do so. That being said, you will gain much more from using PureComponent in your root level nodes (i.e. PureComponent will not improve overall performance as much in leaf level components because it only saves renders from that component).

对于PureComponent的一些警告在反应文档中得到了很好的解释。

Some caveats to PureComponent are explained very well in the react docs.

React.PureComponent的shouldComponentUpdate（）只是浅析对象。

React.PureComponent's shouldComponentUpdate() only shallowly compares the objects.

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

You could accidentally miss rendering updates if your prop changes are deep in a nested object. PureComponent is only great with simple flat objects/props or by using something like ImmutableJS to detect changes in any object with a simple comparison.

此外，React.PureComponent的shouldComponentUpdate（）跳过整个组件子树的prop更新。确保所有子组件都是纯粹的。

Furthermore, React.PureComponent's shouldComponentUpdate() skips prop updates for the whole component subtree. Make sure all the children components are also "pure".

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

PureComponent only works whenever the rendering of your component depends only on props and state. This should always be the case in react but there are some examples where you need to re-render outside of the normal react lifecycle. In order for PureComponent to work as expected (skipping the re-rendering you don't really need to happen), every descendant of your PureComponent should be 'pure' (dependent only upon props and state).

这篇关于我应该在任何地方使用React.PureComponent吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！