我有一个关于React的问题shouldComponentUpdate(未覆盖时)。我确实更喜欢纯功能组件,但是即使prop / state不变,我也担心它每次都会更新。所以我正在考虑使用PureComponent类。
shouldComponentUpdate
我的问题是:功能组件shouldComponentUpdate是否与PureComponents 具有相同的检查?还是每次都会更新?
在React中,功能组件是无状态的,并且它们没有生命周期方法。 无状态组件是一种编写React组件的优雅方式,而我们的捆绑包中没有太多代码。 但是在内部,无状态组件被包装在一个类中,而目前没有进行任何优化。这意味着无状态组件和有状态组件在内部都具有相同的代码路径(尽管我们对它们的定义不同)。
但是在将来,React可能会优化无状态组件,如下所示:
将来,通过避免不必要的检查和内存分配,我们还将能够针对这些组件进行性能优化。[更多阅读…]
您可以在此处应用我们的自定义优化,避免不必要的组件重新渲染。下面说明了此方法在不同类型的组件中的用法:
如前所述,无状态组件没有生命周期方法,因此我们无法使用进行优化shouldComponentUpdate。但是它们已经以不同的方式进行了优化,与具有所有生命周期挂钩的组件相比,它们具有更简单,更优雅的代码结构,并且字节数更少。
从 React v15.3.0开始 ,我们有了一个新的基类, PureComponent 以扩展为 PureRenderMixin 内置类。在引擎盖下,此方法将当前道具/状态与内的下一个道具/状态进行浅层比较shouldComponentUpdate。
PureComponent
PureRenderMixin
也就是说,我们仍然不能依靠PureComponent类来将组件优化到所需的水平。如果我们的道具具有Object类型(数组,日期,普通对象),则会发生这种异常情况。这是因为比较对象时我们遇到了这个问题:
Object
const obj1 = { id: 1 }; const obj2 = { id: 1 }; console.log(obj1 === obj2); // prints false
因此,浅浅的比较不足以确定情况是否已更改。但是PureComponent如果您的道具只是字符串,数字,布尔值..而不是对象,请使用class。如果您不想实现自己的自定义优化,也可以使用它。
考虑上面的例子;如果我们知道对象已更改(如果对象id已更改),则可以通过比较来实现自己的自定义优化obj1.id === obj2.id。在这里我们可以使用extend普通的Component基类并shouldComponentUpdate用来自己对特定键进行比较。
id
obj1.id === obj2.id
extend
Component