React 第二十四章 shouldComponentUpdate

本文主要是介绍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>)}
}