React中React.PureComponent和React.Component有什么区别？

在React中，React.Component和React.PureComponent都是用来创建组件的基类。它们之间的主要区别在于它们对待组件状态和props的比较方式。理解这两种组件的区别对于优化React应用的性能和正确性至关重要。

1. React.Component

  React.Component是React中最常用的组件基类。它提供了组件生命周期的方法，如constructor、render、componentDidMount、shouldComponentUpdate等。默认情况下，每次状态或props发生变化时，React.Component都会进行重新渲染。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState(state => ({ count: state.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

  在这个例子中，MyComponent是一个简单的计数器组件，它有一个按钮来增加状态中的count值。

2. React.PureComponent

  React.PureComponent是React.Component的一个子类，它在渲染行为上有所不同。React.PureComponent在默认情况下实现了shouldComponentUpdate方法，它通过浅比较组件的props和state来决定是否需要重新渲染。如果props和state都是相同的，组件将不会重新渲染。

class MyPureComponent extends React.PureComponent {
  // 无需手动实现shouldComponentUpdate，因为React.PureComponent已经提供了一个基于props和state的浅比较的实现

  render() {
    // 渲染逻辑与MyComponent相同
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.props.increment}>Increment</button>
      </div>
    );
  }
}

  在这个例子中，MyPureComponent与MyComponent的渲染逻辑相同，但它继承自React.PureComponent，因此具有优化的渲染行为。

3. React.PureComponent和React.Component的区别

• 性能优化：React.PureComponent通过浅比较props和state来避免不必要的渲染，这可以提高组件的性能。如果组件的状态和属性在渲染之间没有变化，那么组件将不会重新渲染。
• 实现细节：React.PureComponent在内部实现了shouldComponentUpdate方法，而React.Component需要开发者自己实现或继承默认行为（总是返回true）。
• 使用场景：当你确定组件的渲染结果只依赖于其props和state，并且这些props和state是可比较的（例如，基本类型或具有稳定引用的对象），那么使用React.PureComponent是一个好的选择。