React.Component 与 React.PureComponent

Question

官方的 React 文档 声明“ React.PureComponent 的 shouldComponentUpdate() 仅对对象进行浅层比较”，如果状态为“深”，则建议不要这样做。

鉴于此，在创建 React 组件时，有什么理由应该更喜欢 React.PureComponent ？

问题：

• 使用 React.Component 我们可以考虑使用 React.PureComponent 是否有任何性能影响？
• 我猜 shouldComponentUpdate() of PureComponent 只执行浅比较。如果是这种情况，不能用上述方法进行更深层次的比较吗？
• “此外， React.PureComponent 的 shouldComponentUpdate() 跳过整个组件子树的道具更新” - 这是否意味着道具更改被忽略？

如果有帮助，问题来自阅读此 媒体博客。

原文由 semuzaboi 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

React.PureComponent 和 React.Component 之间的主要区别是 PureComponent 对状态变化进行了 浅层比较。这意味着在比较标量值时它比较它们的值，但是在比较对象时它只比较引用。它有助于提高应用程序的性能。

当您满足以下任何条件时，您应该选择 React.PureComponent 。

• State/Props 应该是一个不可变的对象
• 状态/道具不应该有层次结构
• 您应该在数据更改时调用 forceUpdate

如果您使用 React.PureComponent 您应该确保所有子组件也是纯的。

使用 React.component 对性能有什么影响，我们可以考虑使用 React.PureComponent 吗？

是的，它会提高你的应用性能（因为比较浅）

我猜 Purecomponent 的 shouldComponentUpdate() 只执行浅比较。如果是这种情况，上述方法不能用于更深入的比较吗？

你猜对了。如果您满足我上面提到的任何条件，您就可以使用它。

“此外，React.PureComponent 的 shouldComponentUpdate() 会跳过整个组件子树的 prop 更新”——这是否意味着 prop 更改被忽略？

是的，如果在浅比较中找不到差异，道具更改将被忽略。

原文由 vimal1083 发布，翻译遵循 CC BY-SA 3.0 许可协议