React 说纯渲染可以优化性能。现在 React 有了 PureComponent。我应该到处使用 React.PureComponent 吗?或者什么时候使用 React.PureComponent 以及使用 React.PureComponent 最合适的位置在哪里?
我应该到处使用 React.PureComponent 吗?
当一个组件可以重新渲染时,即使它具有相同的 props 和 state,你也应该使用它。一个例子是父组件必须重新渲染但子组件的 props 和 state 没有改变。子组件可以从 PureComponent 中受益,因为它确实不需要重新渲染。你不一定要在任何地方使用它。每个组件都实现浅层没有意义shouldComponentUpdate()
。在许多情况下,它添加了额外的生命周期方法而不会让您获得任何胜利。
如果您有很多根级组件更新而子级组件不需要更新的情况,它可以大大节省您的渲染时间。话虽如此,您将从在根级节点中使用 PureComponent 获得更多收益(即 PureComponent 不会像在叶级组件中那样提高整体性能,因为它只保存来自该组件的渲染)。
对 PureComponent 的一些警告在 react 文档中得到了很好的解释。
React.PureComponent 的 shouldComponentUpdate() 只是浅层比较对象。
如果您的props更改位于嵌套对象的深处,您可能会意外错过渲染更新。PureComponent 仅适用于简单的平面对象/props,或者使用 ImmutableJS 之类的东西通过简单的比较来检测任何对象的变化。
此外,React.PureComponent 的 shouldComponentUpdate() 会跳过整个组件子树的 prop 更新。确保所有子组件也是“纯”的。
PureComponent 仅在组件的渲染仅依赖于 props 和 state 时才起作用。在 React 中应该始终如此,但在某些示例中,您需要在正常的 React 生命周期之外重新渲染。为了让 PureComponent 按预期工作(跳过您并不真正需要发生的重新渲染),您的 PureComponent 的每个后代都应该是“纯”的(仅依赖于props和状态)。
根据这个参考,不(你不应该在任何地方使用它):
(我在 React 工作。) [...] 如果我们建议在任何地方都使用 PureComponent,它可能已经是默认设置了。而是——决定一个组件是否应该重新渲染的比较需要花费一些东西,如果你确实想要重新渲染,那么检查是否应该重新渲染所花费的所有时间都被浪费了。
相反,我们建议您注意需要进行比较的位置。它通常只在您的应用程序中的几个地方。优秀的候选者位于一长串子列表中或应用程序的大部分独立更改的部分(即,您知道父级应该经常重新渲染但子级不应该重新渲染的情况)。一些适当的 shouldComponentUpdate(或 PureComponent)使用可以大有帮助。
——
我发现Dan Abramov 的一条推文也说了同样的话(2016 年 7 月 30 日)。