面试题：React组件性能优化之中等难度 - shouldComponentUpdate的使用

Question

在React组件性能优化中，`shouldComponentUpdate` 方法起着重要作用。请描述 `shouldComponentUpdate` 的作用，以及在类组件中如何正确使用它来避免不必要的重新渲染。假设我们有一个展示用户信息的组件，包含用户名和用户年龄，当年龄发生变化时才需要重新渲染，代码应该如何实现？

Answer 1

shouldComponentUpdate 的作用

shouldComponentUpdate 是 React 类组件的生命周期方法之一。它允许开发者控制组件是否需要因为 props 或 state 的变化而重新渲染。通过返回 true 或 false，true 表示允许组件重新渲染，false 则阻止组件重新渲染。这样可以避免不必要的重新渲染，从而提升组件性能。

在类组件中正确使用 shouldComponentUpdate 避免不必要重新渲染的方法

1. 在类组件中定义 shouldComponentUpdate 方法。
2. 在该方法内比较 nextProps 与 this.props，nextState 与 this.state。根据比较结果返回 true 或 false。例如，如果仅当 props 中的某个特定属性变化时才重新渲染，可以这样写：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.specificProp!== this.props.specificProp;
  }
  render() {
    // 组件渲染逻辑
  }
}

展示用户信息组件（仅年龄变化时重新渲染）的代码实现

import React from 'react';

class UserInfo extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.age!== this.props.age;
  }

  render() {
    const { username, age } = this.props;
    return (
      <div>
        <p>用户名: {username}</p>
        <p>年龄: {age}</p>
      </div>
    );
  }
}

export default UserInfo;

在上述代码中，shouldComponentUpdate 方法比较了 nextProps.age 和 this.props.age，只有当年龄发生变化时，才会返回 true 允许组件重新渲染。