Question

我是React的新手，我想知道什么时候应该使用反应组件，什么时候应该使用 React PureComponent ？

组件：

import React, { Component } from 'react'

PureComponent：

import React, { PureComponent } from 'react'

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

OR

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

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

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

Answer 1

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

是的，您可以越来越多地尝试使用功能组件。如果是Class组件，请将其缩小并扩展到PureComponent或Component，如果您想实现自己的shouldComponentUpdate，建议在最小的非复杂（嵌套的深层数组或对象）属性更改组件需求时建议这样做更新。

使用shouldComponentUpdate是否安全？

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

所引用的中级帖子正在尝试售罄react-update-if-changed软件包，这似乎很值得一开始，但是当您意识到这一点

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

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

传递道具到该组件，您知道该组件需要，并且将进行更改
如果有许多道具被发送到组件，并且在很少的有限道具更改下，组件需要更新并重新渲染，那么您可以实现您自己的shouldComponentUpdate （请参阅上面的React优化共享链接中的示例）。但是要警惕数组和对象的道具，因为区分它们是一件痛苦的事情，尤其是深而笨拙的嵌套道具。
在用户界面中使用Functional (pure & stateless) component，而其呈现逻辑（显示隐藏，排序等）将出现在Class (stateful and pure by extending it to React.PureComponent) having children prop as a function组件中；借助HOC链接逻辑和UI组件
在尝试在祖先和后代之间传递道具时，请使用React Context API，尤其是当它们的等级超出像父级父级子级到子级子级的水平时。

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

Answer 2

import React, { PureComponent } from 'react'
export default Class PureComponent  extends React.PureComponent{
}

import React, { Component } from 'react'
export default Class NormalComponent  extends React.Component{
}

PureComponent没有任何生命周期方法

PureComponent check shallow comparison and re-render when Needed
Use Pure Component when used when primitive data types int string boolean etc,

注意：-

PureComponent没有任何生命周期方法
React PureComponent的shouldcomponentupdate（）仅浅浅地比较对象。

React Component或React PureComponent

2 个答案: