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

在上面的代码中，我们在类组件中书写了一个 shouldComponentUpdate 的生命周期钩子函数，该函数会在渲染执行之前被调用，函数内部能够接收到新的属性和新的状态，我们要做的就是让新的属性和状态和当前的属性以及状态进行浅比较，如果相同则返回 false，也就是不重新渲染。

总结

shouldComponentUpdate 是一个非常有用的方法，可以帮助你控制组件的重新渲染，以提高性能。但是，过度使用它也可能会导致一些问题，所以需要在实际开发中进行权衡和合理使用。