介绍

componentDidUpdate 是 React 组件生命周期的一个方法，它在组件更新后被调用。它提供了更新前和更新后的 props 和 state，可以根据这些参数来执行一些操作，比如更新 DOM 或发送请求。在 componentDidUpdate 方法中，可以使用 this.setState() 方法，但要注意不要无限循环更新组件。该方法必须有一个布尔类型的返回值，用于指示是否已更新。

参数

componentDidUpdate 方法接收三个参数：

• prevProps：更新前的 props
• prevState：更新前的 state
• snapshot：上一个渲染的返回值。它只有在 getSnapshotBeforeUpdate 方法存在时才会被传递。

componentDidUpdate(prevProps, prevState, snapshot) {
  // 在这里可以根据更新后的 props 和 state 执行一些操作
}

示例

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

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      document.title = `You clicked ${this.state.count} times`;
    }
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

在这个示例中，每次按钮被点击时，state.count 会增加 1，更新后的 count 和之前的 count 进行比较，如果不相等，则更新页面标题。这里可以使用 componentDidUpdate 方法来实现这个功能。