面试题：React 组件树优化之中的shouldComponentUpdate使用

在React项目中，shouldComponentUpdate 方法用于在组件接收到新的 props 或 state 时，决定是否需要重新渲染该组件，从而优化组件树性能。

接收参数：
- nextProps：即将被传递给组件的新 props 对象。
- nextState：即将被更新到组件的新 state 对象。

示例：假设有一个简单的 Counter 组件，只依赖 props 中的 count 属性来显示数值：

import React from 'react';

class Counter extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 仅当 props.count 发生变化时才更新
    return this.props.count!== nextProps.count;
  }

  render() {
    return <div>{this.props.count}</div>;
  }
}

export default Counter;

在上述示例中，shouldComponentUpdate 方法比较当前 props.count 和 nextProps.count，如果它们不同，返回 true，表示组件需要更新；如果相同，返回 false，组件不会重新渲染，从而避免了不必要的渲染，提升了性能。

对于依赖 state 的组件，也可以同样处理。例如，一个 Toggle 组件，根据 state 中的 isOn 来显示不同文本：

import React from 'react';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isOn: false
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    // 仅当 state.isOn 发生变化时才更新
    return this.state.isOn!== nextState.isOn;
  }

  handleClick = () => {
    this.setState(prevState => ({
      isOn:!prevState.isOn
    }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>
          {this.state.isOn? 'ON' : 'OFF'}
        </button>
      </div>
    );
  }
}

export default Toggle;

这里 shouldComponentUpdate 方法比较当前 state.isOn 和 nextState.isOn，仅当它们不同时才允许组件更新，防止了不必要的重新渲染。

星途面试题库

面试题：React 组件树优化之中的shouldComponentUpdate使用

知识考点

面试题答案