面试题：React 中 shouldComponentUpdate 的触发时机及基础用法

Question

在 React 项目里，简要描述 shouldComponentUpdate 方法在组件生命周期中的触发时机。若有一个简单的展示组件，接收 name 和 age 两个属性，仅当 name 变化时才重新渲染，如何通过 shouldComponentUpdate 来实现？

Answer 1

1. shouldComponentUpdate 方法触发时机

在 React 组件的生命周期中，shouldComponentUpdate 方法会在接收到新的 props 或者 state 时被触发。它在 render 方法调用之前触发，用于决定组件是否需要根据新的 props 或 state 进行重新渲染。如果该方法返回 true，则组件会重新渲染；如果返回 false，则组件不会重新渲染，跳过后续的 render 方法及 componentDidUpdate 方法的调用。

2. 实现仅当 name 变化时重新渲染

import React, { Component } from 'react';

class SimpleDisplayComponent extends Component {
  shouldComponentUpdate(nextProps) {
    return nextProps.name!== this.props.name;
  }

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

export default SimpleDisplayComponent;

在上述代码中，shouldComponentUpdate 方法对比了新的 props 中的 name 和当前 props 中的 name，只有当 name 发生变化时才返回 true，从而触发组件重新渲染。如果 name 没有变化，即使 age 变化了，组件也不会重新渲染。