React 第二十五章 React.PureComponent

React.PureComponent 是 React 中的一个优化性能的组件。它继承自 React.Component，但实现了一个浅层的属性和状态的比较，通过这种比较可以避免不必要的组件渲染。

当一个组件的属性或状态发生变化时，React 会重新渲染这个组件及其子组件。但是，在某些情况下，组件的属性或状态可能没有真正改变，这时候重新渲染组件是不必要的，会浪费性能。

React.PureComponent 的实现就是通过在组件的 shouldComponentUpdate 生命周期方法中进行浅层比较，判断组件是否需要重新渲染。浅层比较只会比较属性和状态的值，而不会比较它们的内部结构。这样可以避免深层的比较过程，提高性能。

具体实现可以参考 React 第二十三章 shouldComponentUpdate

使用 React.PureComponent 可以简化性能优化的过程，因为不需要手动实现 shouldComponentUpdate 方法去比较属性和状态。

注意

React.PureComponent 只会进行浅层比较，如果属性或状态是引用类型的值（如对象或数组），并且发生了变化但是引用不变，那么 React.PureComponent 仍然会认为属性或状态没有改变，不会重新渲染组件。这时需要确保属性或状态的变化能够触发重新渲染的条件，如果需要深层比较，可以考虑使用 React.Component 并手动实现 shouldComponentUpdate 方法。

代码示例

import React, { PureComponent } from 'react'
export default class App extends PureComponent {

  constructor() {
    super();
    this.state = {
      counter: 1
    }
  }

  render() {
    console.log("App 渲染了");
    return (
      <div>
        <h1>App 组件</h1>
        <div>{this.state.counter}</div>
        <button onClick={() => this.setState({
          counter: Math.floor(Math.random() * 3 + 1)
        })}>+1</button>
      </div>
    )
  }
}

在上面我们书写了一个设置 1～3 随机数的计数器。当新的 counter 和旧的 counter 一致时，组件不重新渲染。

总结

React.PureComponent 是一个帮助优化性能的组件，通过浅层比较属性和状态的值来避免不必要的组件渲染。但需要注意深层比较的情况，以确保组件能够正常地重新渲染。