面试题：React更新阶段中shouldComponentUpdate钩子的作用及使用场景

Question

在React更新阶段，shouldComponentUpdate钩子的主要作用是什么？请举例说明一个适合使用shouldComponentUpdate钩子来优化性能的场景。

Answer 1

shouldComponentUpdate钩子的主要作用

shouldComponentUpdate 钩子用于在组件接收到新的 props 或 state 时，决定是否需要重新渲染组件。它接收 nextProps 和 nextState 作为参数，返回一个布尔值。如果返回 true，则组件将重新渲染；如果返回 false，则组件不会重新渲染，从而可以避免不必要的渲染，提升性能。

适合使用shouldComponentUpdate钩子来优化性能的场景举例

假设有一个展示用户信息的组件 UserInfo，它接收 props 中的用户数据来显示用户的姓名和年龄。当父组件状态更新时，可能会传递新的 props 给 UserInfo，但如果用户数据实际上没有变化，就不需要重新渲染 UserInfo 组件。

import React, { Component } from 'react';

class UserInfo extends Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较当前props和nextProps中的用户数据
    return (
      this.props.user.name!== nextProps.user.name ||
      this.props.user.age!== nextProps.user.age
    );
  }

  render() {
    const { user } = this.props;
    return (
      <div>
        <p>Name: {user.name}</p>
        <p>Age: {user.age}</p>
      </div>
    );
  }
}

export default UserInfo;

在上述代码中，shouldComponentUpdate 方法对比了当前 props 和即将到来的 nextProps 中的用户姓名和年龄。只有当姓名或年龄发生变化时，才会返回 true，触发组件重新渲染。如果用户数据没有变化，组件就不会重新渲染，从而优化了性能。