React.Component 与 React.PureComponent

IT技术 reactjs state
2021-04-09 15:36:50

官方阵营文档状态“React.PureComponentshouldComponentUpdate()只有比较浅的对象”,并建议针对这一点,如果状态是‘深’。

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

问题

  • 使用中是否有任何React.Component我们可以考虑使用的性能影响React.PureComponent
  • 我猜 shouldComponentUpdate()PureComponent执行只有浅薄的比较。如果是这种情况,不能使用该方法进行更深入的比较吗?
  • “此外,React.PureComponent'sshouldComponentUpdate()跳过整个组件子树的props更新” - 这是否意味着props更改被忽略?

如果有帮助的话,问题是通过阅读这个媒体博客而产生的

4个回答

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

React.PureComponent当您可以满足以下任何条件时,您应该去

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

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

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

是的,它会提高您的应用程序性能(因为比较浅薄)

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

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

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

是的,如果在浅层比较中找不到差异,则props更改将被忽略。

@Mr.Script 我希望这会有所帮助stackoverflow.com/a/957602/2557900
2021-05-22 15:36:50
如果 state/props 是不可变对象,那么拥有层次结构并仍然使用 PureComponent 应该没问题,只要这些层次结构也维护不可变对象,对吗?
2021-06-02 15:36:50
@SanyLiew 这意味着 state 和 props 应该只包含原始值,如数字和字符串,而不是对象内的对象(层次结构)。
2021-06-04 15:36:50
嗨@VimalrajSankar。感谢您的帮助。能否请您举例说明以下语句: It means that when comparing scalar values it compares their values, but when comparing objects it compares only references. It helps to improve the performance of the app.? 谢谢
2021-06-09 15:36:50
State/Props should not have a hierarchy 抱歉,你能解释一下这里的层次结构是什么意思吗?
2021-06-14 15:36:50

Component并且PureComponent有一个区别

PureComponent完全相同,Component只是它shouldComponentUpdate为您处理方法。

当 props 或 state 发生变化时,PureComponent会对props 和 state做一个浅比较Component另一方面,不会将当前的 props 和 state 与下一个开箱即用的进行比较。因此,每当shouldComponentUpdate调用该组件时,默认情况下都会重新渲染

浅比较

当比较之前的 props 和 state 与 next 时,浅比较将检查基元是否具有相同的值(例如,1 等于 1 或 true 等于 true)以及更复杂的 javascript 值(如对象和数组)之间的引用是否相同。

来源:https : //codeburst.io/when-to-use-component-or-purecomponent-a60cfad01a81

React.Component => 因此,如果我多次使用相同的道具重新渲染相同的组件。它会触发它的孩子的渲染。不管道具有没有变
2021-05-28 15:36:50

在我看来,主要区别在于组件每次其父级重新渲染时都会重新渲染,而不管组件的 props 和 state 是否已更改。

另一方面,纯组件在其父级重新渲染时不会重新渲染,除非纯组件的props(或状态)已更改。

例如,假设我们有一个具有三级层次结构的组件树:父级、子级和孙级。

当父母的 props 以一种只改变一个孩子的 props 的方式改变时,那么:

  • 如果所有组件都是常规组件,那么整个组件树将重新渲染
  • 如果所有子代和孙代都是纯组件,那么只有一个子代会重新渲染,并且它的一个或所有孙代会重新渲染,这取决于他们的 props 是否改变。如果此组件树中有很多组件,则可能意味着显着的性能提升。

但是,有时使用纯组件不会产生任何影响。我遇到过这样的情况,当父级从 redux 商店收到它的 props 并且需要对其子级的 props 执行复杂的计算。父级使用平面列表来呈现其子级。

结果是,每次redux store 有一点小的变化,孩子们的数据的整个flatlist 数组都被重新计算。这意味着对于树中的每个组件,props都是新对象,即使值没有改变。

在这种情况下,纯组件无济于事,如果需要重新渲染,则只能通过使用常规组件并在 shouldComponentUpdate 中检查子组件来实现性能提升。

一个用例

渲染大量组件时推荐使用纯组件

例如在内部渲染数百种产品FlatList或我正在使用.map()