reactjs - React 组件或 React PureComponent

Question

我是 React 新手，我想知道什么时候应该使用 React Component 以及什么时候应该使用 React PureComponent？

组件:

import React, { Component } from 'react'

纯组件:

import React, { PureComponent } from 'react'

我可以在任何地方使用 React PureComponent 吗？

或

使用shouldComponentUpdate是否安全，并检查并返回不需要的false

我刚刚读到一篇文章，指出使用纯组件实际上弊大于利。他们建议使用“react-update-if-changed”。这有多少真实性？

文章:https://hackernoon.com/react-purecomponent-considered-harmful-8155b5c1d4bc

Answer 1

Can I use React PureComponent everywhere?

是的，您可以，但要尝试越来越多地使用功能组件。对于类组件，如果您想实现自己的 shouldComponentUpdate，请保持较小并将其扩展为 PureComponent 或 Component，建议在最小非复杂(嵌套深度数组或/和对象) Prop 更改组件需求时执行此操作更新。

Is it safe to use shouldComponentUpdate?

是的，是的，如果您知道自己在做什么，这意味着您的实现中的任何缺陷都可能导致性能问题，例如不必要的组件重新渲染，只是因为您的 shouldComponentUpdate 实现返回 true 或更糟的是，您的组件没有当您的 shouldComponentUpdate 由于某些故障而返回 false 时，t 会在某些 props 更改时重新渲染。

引用的媒体帖子试图出售react-update-if-changed 软件包，这在开始时似乎是一笔不错的交易，但当你意识到这一点时

the real problem statement is all about performance optimization (refer https://reactjs.org/docs/optimizing-performance.html)

如何避免不必要的检查来确定组件可以更新并避免不必要的重新渲染？

• 将 props 传递给您知道组件需要且将更改的组件
• 万一，如果有许多 Prop 发送到组件，并且很少有有限的 Prop 发生变化，则组件需要更新并重新渲染，那么您可以非常以及实现你自己的shouldComponentUpdate(引用上面的react优化共享链接中的例子)。但要警惕数组和对象这样的 props，因为区分它们是一件痛苦的事情，尤其是那些深度庞大的嵌套对象。
• 使用 Functional (pure & stateless) component对于您的 UI，而其表示逻辑(显示隐藏、排序等)将出现在组件中，该组件将是 Class (stateful and pure by extending it to React.PureComponent) having children prop as a function ;在HOC的帮助下连接逻辑和 UI 组件
• 请使用React Context API当尝试在祖先和后代之间传递 props 时，尤其是当它们超出了祖 parent 组件到子组件的级别时。

使用最后一种方法，即Advanced React Patterns是优化性能和代码库的最佳方式。为了更好地理解它，请引用Dumb and Smart Components和 Presentational and Container Components .