面试题：React组件生命周期优化

Question

在一个大型React项目中，某个组件频繁触发`render`，导致性能下降。已知该组件的数据更新依赖于多个父组件传递的props以及自身的state。请结合React组件生命周期知识，提出至少两种优化该组件性能的方案，并详细说明每种方案在组件生命周期的哪个阶段进行操作以及原理。

Answer 1

方案一：使用 shouldComponentUpdate

• 操作阶段：在组件的 shouldComponentUpdate 生命周期方法中进行操作。
• 原理：shouldComponentUpdate 会在接收到新的 props 或 state 时被调用，它允许我们返回一个布尔值来决定组件是否应该重新渲染。我们可以通过比较新旧 props 和 state，只有当相关数据真正发生变化时才返回 true 进行重新渲染，否则返回 false 阻止不必要的渲染。例如：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 比较 props 中的关键数据是否变化
    if (this.props.keyData!== nextProps.keyData) {
      return true;
    }
    // 比较 state 中的关键数据是否变化
    if (this.state.criticalState!== nextState.criticalState) {
      return true;
    }
    return false;
  }

  render() {
    // 组件渲染逻辑
    return <div>{this.props.keyData}{this.state.criticalState}</div>;
  }
}

方案二：使用 React.memo （针对函数组件）

• 操作阶段：在定义函数组件时使用 React.memo 包裹组件。
• 原理：React.memo 是 React 提供的一个高阶组件，它会对函数组件的 props 进行浅比较。如果前后两次 props 没有变化，就不会触发重新渲染。例如：

const MyFunctionComponent = React.memo((props) => {
  return <div>{props.keyData}</div>;
});

它会自动帮我们进行 props 的浅比较，减少不必要的渲染。如果组件只依赖 props，使用 React.memo 能很方便地优化性能。

方案三：优化数据更新逻辑（减少不必要的 state 更新）

• 操作阶段：在 setState 调用处或者数据处理逻辑中操作。
• 原理：仔细检查 state 更新逻辑，确保只有在真正需要更新 state 时才调用 setState。例如，在一些事件处理函数中，如果多次调用 setState 且数据并没有实际变化，就会导致不必要的 render。可以合并 setState 调用，或者通过条件判断避免无意义的 setState。比如：

class AnotherComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    // 优化前，可能导致不必要的多次渲染
    // this.setState({count: this.state.count + 1});
    // this.setState({message: 'Button clicked'});

    // 优化后，合并 setState
    this.setState((prevState) => {
      return {
        count: prevState.count + 1,
        message: 'Button clicked'
      };
    });
  }

  render() {
    return <button onClick={this.handleClick}>{this.state.count}</button>;
  }
}

这样可以减少不必要的 state 更新，从而减少 render 的触发次数。