React 组件的生命周期方法

在 React 中，组件有着丰富的生命周期方法，可以让我们在组件生命周期的各个阶段执行特定的操作。这些生命周期方法可以分为三类：挂载、更新、卸载。

挂载

当一个组件被插入到 DOM 树中时，首先会触发挂载阶段的生命周期方法。在挂载阶段中，我们可以执行一些初始化操作，例如设置组件的状态、添加事件监听等。

constructor()

constructor() 是 React 组件的构造函数，在组件实例被创建时调用。在这个方法里，我们可以进行一些基本的初始化操作，例如绑定事件处理函数、初始化状态等。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    // 绑定事件处理函数
    this.handleClick = this.handleClick.bind(this);
    // 初始化状态
    this.state = { count: 0 };
  }
}

componentDidMount()

componentDidMount() 方法会在组件挂载到 DOM 树中之后被调用。在这个方法中，我们可以执行一些需要 DOM 元素的操作，例如查询 DOM 元素、设置定时器等。

class MyComponent extends React.Component {
  componentDidMount() {
    // 查询 DOM 元素
    const node = ReactDOM.findDOMNode(this);
    // 设置定时器
    this.timer = setInterval(() => {
      // ...
    }, 1000);
  }
}

更新

组件状态或 props 的更新会触发更新阶段的生命周期方法。在更新阶段中，我们可以根据新的状态或 props 更新组件，例如重新渲染 DOM 元素、发送网络请求等。

componentDidUpdate()

componentDidUpdate() 方法会在组件更新之后被调用。在这个方法中，我们可以根据新的状态或 props 更新组件，例如重新渲染 DOM 元素、发送网络请求等。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    // 根据新的 props 或状态更新组件
    if (this.props.value !== prevProps.value) {
      this.setState({ count: this.props.value });
    }
  }
}

卸载

当一个组件被从 DOM 树中移除时，会触发卸载阶段的生命周期方法。在卸载阶段中，我们可以执行一些清理操作，例如销毁定时器、取消事件监听等。

componentWillUnmount()

componentWillUnmount() 方法会在组件被移除之前调用。在这个方法中，我们可以执行一些清理操作，例如销毁定时器、取消事件监听等。

class MyComponent extends React.Component {
  componentWillUnmount() {
    // 销毁定时器
    clearInterval(this.timer);
    // 取消事件监听
    window.removeEventListener('scroll', this.handleScroll);
  }
}

以上就是 React 组件的生命周期方法。在编写 React 程序时，正确使用这些生命周期方法可以让我们更好地掌控组件的状态和行为。