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