面试题：React 中 componentDidUpdate 性能优化之依赖判断

在 componentDidUpdate 生命周期方法中，可以通过对比前后 props 或 state 的某些关键值（即依赖）来决定是否执行某些操作，从而实现性能优化。以下是一个简单示例：

假设我们有一个 MyComponent 组件，该组件接收一个 data prop，并且只有当 data 发生变化时才需要执行一些昂贵的操作（例如重新计算图表数据）。

import React, { Component } from'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.prevData = null;
  }

  componentDidUpdate(prevProps) {
    if (prevProps.data!== this.props.data) {
      // 只有当 data prop 发生变化时，执行以下操作
      this.performExpensiveOperation();
      this.prevData = this.props.data;
    }
  }

  performExpensiveOperation() {
    // 这里进行昂贵的操作，比如重新计算图表数据
    console.log('执行昂贵的操作');
  }

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

export default MyComponent;

在上述示例中：

在 constructor 中初始化 prevData 为 null。
在 componentDidUpdate 方法中，对比 prevProps.data 和 this.props.data，如果不同则执行 performExpensiveOperation 方法，并更新 prevData。这样，只有当 data prop 变化时才会执行昂贵的操作，避免了不必要的计算，实现了性能优化。

若要对比复杂对象，可以使用 lodash 的 isEqual 方法来进行深度比较，示例如下：

import React, { Component } from'react';
import isEqual from 'lodash/isEqual';

class ComplexComponent extends Component {
  constructor(props) {
    super(props);
    this.prevComplexData = null;
  }

  componentDidUpdate(prevProps) {
    if (!isEqual(prevProps.complexData, this.props.complexData)) {
      this.performAnotherExpensiveOperation();
      this.prevComplexData = this.props.complexData;
    }
  }

  performAnotherExpensiveOperation() {
    console.log('执行另一个昂贵的操作');
  }

  render() {
    return <div>{JSON.stringify(this.props.complexData)}</div>;
  }
}

export default ComplexComponent;

在这个示例中，使用 isEqual 方法来深度比较 prevProps.complexData 和 this.props.complexData，确保在复杂对象数据变化时才执行昂贵操作。

面试题：React 中 componentDidUpdate 性能优化之依赖判断

知识考点

面试题答案