小编典典

功能组件中的shouldComponentUpdate

reactjs

我有一个关于React的问题shouldComponentUpdate(未覆盖时)。我确实更喜欢纯功能组件,但是即使prop /
state不变,我也担心它每次都会更新。所以我正在考虑使用PureComponent类。

我的问题是:功能组件shouldComponentUpdate是否与PureComponents 具有相同的检查?还是每次都会更新?


阅读 285

收藏
2020-07-22

共1个答案

小编典典

在React中,功能组件是无状态的,并且它们没有生命周期方法。 无状态组件是一种编写React组件的优雅方式,而我们的捆绑包中没有太多代码。
但是在内部,无状态组件被包装在一个类中,而目前没有进行任何优化。这意味着无状态组件和有状态组件在内部都具有相同的代码路径(尽管我们对它们的定义不同)。

但是在将来,React可能会优化无状态组件,如下所示:

将来,通过避免不必要的检查和内存分配,我们还将能够针对这些组件进行性能优化。[更多阅读…]

shouldComponentUpdate

您可以在此处应用我们的自定义优化,避免不必要的组件重新渲染。下面说明了此方法在不同类型的组件中的用法:

  • 功能性无状态组件

如前所述,无状态组件没有生命周期方法,因此我们无法使用进行优化shouldComponentUpdate。但是它们已经以不同的方式进行了优化,与具有所有生命周期挂钩的组件相比,它们具有更简单,更优雅的代码结构,并且字节数更少。

  • 扩展React.PureComponent

React v15.3.0开始 ,我们有了一个新的基类, PureComponent 以扩展为
PureRenderMixin
内置类。在引擎盖下,此方法将当前道具/状态与内的下一个道具/状态进行浅层比较shouldComponentUpdate

也就是说,我们仍然不能依靠PureComponent类来将组件优化到所需的水平。如果我们的道具具有Object类型(数组,日期,普通对象),则会发生这种异常情况。这是因为比较对象时我们遇到了这个问题:

    const obj1 = { id: 1 };
const obj2 = { id: 1 };
console.log(obj1 === obj2); // prints false

因此,浅浅的比较不足以确定情况是否已更改。但是PureComponent如果您的道具只是字符串,数字,布尔值..而不是对象,请使用class。如果您不想实现自己的自定义优化,也可以使用它。

  • 扩展React.Component

考虑上面的例子;如果我们知道对象已更改(如果对象id已更改),则可以通过比较来实现自己的自定义优化obj1.id === obj2.id。在这里我们可以使用extend普通的Component基类并shouldComponentUpdate用来自己对特定键进行比较。

2020-07-22