PureComponent 重新渲染

在 React 中，当组件的状态或属性发生变化时，React 将重新渲染该组件。这意味着 React 将在内部比较前一个状态和下一个状态，并将仅重新渲染发生更改的部分。然而，这种比较并非总是最优的，因为它需要时间来进行比较，并阻止组件的重新渲染。

这就是为什么 React 引入了 PureComponent。PureComponent 是 React.Component 的一个子类，其实现了一个浅比较，来比较前一个状态和下一个状态是否相等。如果这两个状态相等，React 将会阻止组件重新渲染，从而提高应用程序性能。

除了自动实现 shouldComponentUpdate 方法的浅比较之外，PureComponent 的使用方式和 Component 是相同的。因此，如果你的应用程序需要性能优化，你可以尝试将你的组件从 Component 转换为 PureComponent，并且看看是否有显著的性能增强。

以下是一个示例，展示了如何将一个类组件从 Component 转换为 PureComponent。

import React, { PureComponent } from 'react';

class MyComponent extends PureComponent {
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <p>This component is now a PureComponent.</p>
      </div>
    );
  }
}

值得注意的是，PureComponent 仅执行浅比较。如果你的组件参数或状态包含复杂的嵌套结构，浅比较可能无法检测到更改。在这种情况下，你可能需要使用 Component 而不是 PureComponent，并通过更细粒度地控制 shouldComponentUpdate 方法来实现性能优化。

总之，PureComponent 是 React 的一个强大的优化工具，可以帮助你提高应用程序的性能。但是，你需要注意其使用方式和限制。在大多数情况下，使用 PureComponent 可以提供显著的性能改善，但是在某些情况下，你可能需要额外的优化手段。