反应组件或反应 PureComponent

Question

我是 React 的新手，我想知道什么时候应该使用React 组件，什么时候应该使用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-thinked-harmful-8155b5c1d4bc

Answer 1

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

是的，你可以但是越来越多地尝试使用函数式组件。对于类组件，如果您想实现自己的 shouldComponentUpdate，请保持较小并将其扩展到 PureComponent 或 Component，建议在最小的非复杂（嵌套的深层数组或/和对象）道具更改您的组件需求时执行此操作更新。

使用 shouldComponentUpdate 是否安全？

是的，如果你知道你在做什么，意味着你的实现中的任何缺陷，都可能导致性能问题，比如不必要的组件重新渲染，仅仅因为你的 shouldComponentUpdate 实现返回 true 或更糟，你的组件不会重新渲染当你的 shouldComponentUpdate 由于一些小故障返回 false 时，某些道具会发生变化。

引用的媒体帖子试图出售 react-update-if-changed 包，这在开始时似乎很划算，但是当您意识到

真正的问题陈述是关于性能优化的（请参阅https://reactjs.org/docs/optimizing-performance.html）

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

• 将 props 传递给您知道组件需要并且将要更改的组件
• 如果有很多 props被发送到一个组件，并且只有很少的有限 props 更改，组件需要更新和重新渲染，那么你可以很好地实现你自己的 shouldComponentUpdate（参考上面的反应优化共享链接中的示例）。但是要小心那些是数组和对象的 props，因为区分它们是一件痛苦的事情，尤其是那些深而笨重的嵌套的。
• 为您的 UI使用功能性（纯和无状态）组件，而对于它的表示逻辑（显示-隐藏、排序等）将存在于一个组件中，该组件将是一个类（通过将其扩展到 React.PureComponent 有状态和纯）具有children prop 作为一个函数；借助HOC链接逻辑和 UI 组件
• 在尝试在祖先和后代之间传递 props 时，一定要使用React Context API，尤其是当它们超出像祖父组件到子组件那样的级别时。

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