React 第二十三章 shouldComponentUpdate

React 中的 shouldComponentUpdate 是一个生命周期方法，用于控制组件是否需要重新渲染。

文档地址：https://zh-hans.reactjs.org/docs/react-component.html#shouldcomponentupdate

shouldComponentUpdate 接收两个参数：nextProps 和 nextState。可以在这个方法中根据传入的新的 props 和 state 来决定是否需要更新组件。默认情况下，shouldComponentUpdate 返回 true，即每当组件接收到新的 props 或者 state 时都会重新渲染。

但是，在某些情况下，你可能希望避免不必要的重新渲染，以提高性能。例如，如果组件的状态变化不会影响到 UI 的展示，那么就可以返回 false 来阻止重新渲染。

在实现 shouldComponentUpdate 方法时，你可以比较 nextProps 和 this.props 以及 nextState 和 this.state 的差异，来判断是否需要重新渲染。你也可以使用 Object.is 方法来进行深比较。如果 shouldComponentUpdate 返回 false，React 将不会更新组件的 props 和 state，并且将跳过渲染过程。

注意

shouldComponentUpdate 只能用于 class 组件，而函数组件中没有这个生命周期方法。但是，你可以使用 React.memo 高阶组件来实现类似的功能，它也可以控制组件是否需要重新渲染。
首次渲染或使用 forceUpdate 方法时不会调用shouldComponentUpdate。
shouldComponentUpdate仅作为性能优化的方式而存在，不要企图依靠此方法来“阻止”渲染。

简单示例

import React, { Component } from 'react'

export default class App extends Component {

  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 : 1
        })}>+1</button>
      </div>
    )
  }
}

在上面的代码中，我们书写了一个简单的计数器，按钮在点击的时候仍然是设置 counter 的值为 1，不过，虽然 counter 的值没有变，整个组件仍然是重新渲染了的。显然，这一次渲染是没有必要的。

此时，我们就可以使用 shouldComponentUpdate 来进行优化。

import React, { Component } from 'react'
import { isEqual } from "./utils/tools"

export default class App extends Component {

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

  /**
   * 
   * @param {*} nextProps 新的 props
   * @param {*} nextState 新的 state
   * @returns 
   */
  shouldComponentUpdate(nextProps, nextState) {
    // shouldComponentUpdate会根据返回值来决定是否重新渲染
    // 默认是 true，要重新渲染
    // 如果返回 false，则不会重新渲染
    // 我们就需要将当前的 props 和 state 与新的 props 和 state 进行一个比较
    if (isEqual(this.props, nextProps) && isEqual(this.state, nextState)) {
      // 如果新旧 props 和 state 都是相同的，那么就返回 false，不需要重新渲染
      return false;
    }
    return true;
  }

  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>
    )
  }
}