PureComponent vs Component

React 提供了两种主要的组件类型：Component 和 PureComponent。虽然它们看起来非常相似，但它们之间存在一些重要的区别，特别是在组件的性能优化方面。本文将深入探讨这两种组件的区别以及它们的适用场景。

1. Component 组件

Component 是 React 中最基本的组件类型之一。它是所有 React 类组件的基类。当使用 Component 创建的组件进行重新渲染时，React 将始终重新渲染该组件及其所有子组件，无论它们的状态或属性是否发生了变化。这意味着即使组件的状态没有发生变化，React 也会重新渲染该组件，这可能会导致不必要的性能开销。

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

2. PureComponent 组件

PureComponent 是 Component 的一个变体，它通过对 shouldComponentUpdate 方法的自动实现来提供性能优化。PureComponent 会对组件的 props 和 state 进行浅比较，仅在它们发生变化时才会触发重新渲染。这意味着如果组件的 props 和 state 没有变化，React 将不会重新渲染该组件，从而节省了渲染所需的时间和资源。

import React, { PureComponent } from 'react';

class MyPureComponent extends PureComponent {
  render() {
    return <div>Hello, World!</div>;
  }
}

3. 区别对比

性能优化： PureComponent 自动实现了 shouldComponentUpdate 方法，因此在某些情况下可以减少不必要的重新渲染，提高性能。
浅比较： Component 和 PureComponent 在确定是否重新渲染时，都是使用浅比较（shallow comparison）。区别在于 PureComponent 内置了一个名为 shouldComponentUpdate() 的浅比较实现，而 Component 需要手动实现这个生命周期方法来进行比较并返回是否需要重新渲染。PureComponent 会自动对组件的 props 和 state 进行浅比较，如果发现没有变化，则不会触发重新渲染，而 Component 每次都会触发重新渲染
适用场景： 对于简单的组件或者组件的数据结构较为复杂的情况下，使用 Component；对于数据结构较为简单且渲染性能要求较高的组件，可以考虑使用 PureComponent。

4. 注意事项

不可变数据结构： 在使用 PureComponent 时，确保组件的 props 和 state 是不可变的，以确保浅比较能够正常工作。
避免突变对象： 避免直接突变（mutate）对象，而是使用不可变的数据结构或者创建新的对象来确保浅比较的正确性。

结论

PureComponent 提供了一种简单而有效的方式来优化 React 应用程序的性能，通过减少不必要的重新渲染来提高应用程序的性能。但是，需要注意确保组件的 props 和 state 是不可变的，以确保浅比较能够正确工作。根据组件的特性和性能要求，灵活选择 Component 或 PureComponent 来实现最佳的性能和开发体验。