React Class 组件生命周期解析

2023-09-21 15:12:20

React Class 组件的生命周期：控制组件行为和管理状态

React Class 组件的生命周期是一个强大的工具，它为开发者提供了控制组件行为和管理状态的能力。了解其生命周期的各个阶段至关重要，这样才能构建健壮且可维护的 React 应用程序。

初始化

React Class 组件从 constructor 方法开始。在这里，可以初始化组件状态和绑定事件处理程序。

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

挂载

组件挂载时，生命周期方法的顺序如下：

componentWillMount： 在组件即将挂载到 DOM 之前调用。
componentDidMount： 在组件挂载到 DOM 之后调用。

componentDidMount 通常用于执行与 DOM 交互、API 调用或订阅事件等操作。

更新

当组件状态或属性发生变化时，生命周期方法的顺序如下：

componentWillReceiveProps： 在组件即将接收新的属性时调用。
shouldComponentUpdate： 在组件即将更新时调用。它返回一个布尔值，表示组件是否需要更新。
componentWillUpdate： 在组件即将更新之前调用。
componentDidUpdate： 在组件更新之后调用。

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log(`Count changed from ${prevState.count} to ${this.state.count}`);
    }
  }
}

卸载

当组件从 DOM 中卸载时，生命周期方法的顺序为：

componentWillUnmount： 在组件即将从 DOM 中卸载之前调用。

componentWillUnmount 通常用于取消订阅事件、清除计时器或释放任何资源。

示例：检测状态变化

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

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      console.log(`Count changed from ${prevState.count} to ${this.state.count}`);
    }
  }

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