componentDidUpdate 方法在组件更新后做什么？

componentDidUpdate 方法在组件完成更新并重新渲染到页面后被调用， 它主要用于执行一些与更新后的组件状态和属性相关的操作

DOM 操作

• 由于此时组件已经渲染到页面上，因此可以安全地访问和操作 DOM 节点。例如，可以根据更新后的状态来修改 DOM 元素的样式、属性或内容。假设我们有一个显示用户信息的组件，当用户的某些信息更新后，我们可以在 componentDidUpdate 中根据新的信息来更新对应的 DOM 元素的显示内容，如下所示：

componentDidUpdate(prevProps, prevState) {
  if (this.state.userInfo!== prevState.userInfo) {
    const nameElement = document.getElementById('user-name');
    nameElement.textContent = this.state.userInfo.name;

    const ageElement = document.getElementById('user-age');
    ageElement.textContent = this.state.userInfo.age;
  }
}

发起网络请求

• 根据更新后的状态或属性，可能需要重新发起网络请求来获取最新的数据。比如，当用户切换了筛选条件后，组件的状态发生变化，此时可以在 componentDidUpdate 中根据新的筛选条件发起新的网络请求，以获取符合条件的数据并更新组件的显示内容，示例代码如下：

componentDidUpdate(prevProps, prevState) {
  if (this.state.filter!== prevState.filter) {
    fetch(`/api/data?filter=${this.state.filter}`)
     .then(response => response.json())
     .then(data => this.setState({ data }));
  }
}

与第三方库交互

• 如果组件使用了第三方库，并且需要在组件更新后与第三方库进行交互，可以在 componentDidUpdate 中进行相应的操作。例如，使用了一个图表库来展示数据，当组件的数据更新后，需要在 componentDidUpdate 中调用第三方库的方法来更新图表的显示，代码示例如下：

import Chart from 'chart.js';

class MyChartComponent extends React.Component {
  constructor(props) {
    super(props);
    this.canvasRef = React.createRef();
    this.state = {
      chartData: []
    };
  }

  componentDidMount() {
    const ctx = this.canvasRef.current.getContext('2d');
    this.chart = new Chart(ctx, {
      // 图表配置项
      type: 'bar',
      data: {
        labels: ['Label 1', 'Label 2', 'Label 3'],
        datasets: [{
          label: 'My Dataset',
          data: this.state.chartData,
        }]
      },
    });
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.chartData!== prevState.chartData) {
      this.chart.data.datasets[0].data = this.state.chartData;
      this.chart.update();
    }
  }

  render() {
    return (
      <canvas ref={this.canvasRef} />
    );
  }
}

处理副作用

• 可以在 componentDidUpdate 中处理一些与组件更新相关的副作用，如记录日志、发送统计信息等。例如，每次组件更新后，可以将更新的信息发送到服务器进行日志记录，以便分析用户的操作行为和应用的性能情况，示例如下：

componentDidUpdate(prevProps, prevState) {
  const updateInfo = {
    prevProps,
    newProps: this.props,
    prevState,
    newState: this.state,
    timestamp: new Date().getTime()
  };
  fetch('/api/log-update', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(updateInfo)
  });
}

对比前后状态进行特定操作

• 通过比较当前的 props 和 state 与前一个 props 和 state，可以根据变化情况执行特定的操作。比如，当一个列表组件的数据源发生变化时，只有当数据的长度发生改变时才执行一些复杂的渲染优化操作，示例代码如下：

componentDidUpdate(prevProps, prevState) {
  if (this.props.data.length!== prevProps.data.length) {
    // 执行复杂的渲染优化操作
    this.optimizeRendering();
  }
}

在 componentDidUpdate 中使用 this.props 和 this.state 时要小心，因为此时它们已经是更新后的最新值，与 prevProps 和 prevState 所代表的前一个状态不同。同时，如果在 componentDidUpdate 中再次调用 setState，要确保不会导致无限循环的更新，通常需要添加适当的条件判断来避免不必要的状态更新。