React表示纯渲染可以优化性能。现在,React具有PureComponent。我应该在各处使用React.PureComponent吗?还是什么时候使用React.PureComponent,哪里才是使用React.PureComponent的最合适位置?
当组件可以重新渲染时,即使它具有相同的道具和状态,也应该使用它。例如,当父组件必须重新渲染而子组件的props和state不变时。子组件可以从PureComponent中受益,因为它确实不需要重新渲染。您不必在任何地方使用它。对于每个组件来说,实现浅表并不是有意义的shouldComponentUpdate()。在许多情况下,它增加了额外的生命周期方法,却无济于事。
shouldComponentUpdate()
如果在许多情况下根级组件无需子级更新,则可以大大节省渲染时间。话虽如此,通过在根级别节点中使用PureComponent将获得更多收益(即PureComponent不会在叶级别组件中提高整体性能,因为它仅保存该组件的渲染)。
在react docs中很好地解释了PureComponent的一些警告。
React.PureComponent的shouldComponentUpdate()仅对对象进行比较。
如果您的道具更改位于嵌套对象的深处,您可能会意外错过渲染更新。PureComponent仅适用于简单的平面对象/道具或通过使用ImmutableJS之类的东西通过简单比较来检测任何对象中的变化。
此外,React.PureComponent的shouldComponentUpdate()会跳过整个组件子树的属性更新。确保所有子组件也都是“纯”的。
仅当组件的呈现仅取决于属性和状态时,PureComponent才起作用。在React中总是应该如此,但是有一些示例需要在正常React生命周期之外重新渲染。为了使PureComponent能够按预期工作(跳过您根本不需要进行的重新渲染),PureComponent的每个后代都应该是“纯净的”(仅取决于道具和状态)。