功能组件中的shouldComponentUpdate

Question

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

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

Answer 1

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

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

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

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用来自己对特定键进行比较。