ReactJS 组件生命周期的不同阶段是什么？

生命周期方法：在 ReactJS 中，每个组件的开发都涉及到不同生命周期方法的使用。用于创建此类组件的所有生命周期方法共同构成了组件的生命周期。它们被定义为在组件的各个阶段调用的一系列函数。生命周期组件的每个阶段都包含一些与该特定阶段相关的特定生命周期方法。响应式组件的生命周期主要涉及 4 个阶段，如下所示。

初始化
安装
更新
卸载

阶段 1：初始化

这是 React 组件生命周期的初始阶段。顾名思义，这个阶段涉及到所有的声明、定义和属性的初始化，默认的 props 以及开发者需要的组件的初始状态。在基于类的组件中，这是在组件的构造函数中实现的。此阶段在整个生命周期中仅发生一次。此阶段包含的方法有：

getDefaultProps()：在创建组件之前立即调用的方法，或者将父组件中的任何道具传递到所述（子）组件中。它用于指定 props 的默认值。
getInitialState()：在组件创建之前立即调用的方法，用于指定状态的默认值。

第 2 阶段：安装

React 组件生命周期的第二个阶段，紧随其后的是初始化阶段，是安装阶段。它从组件定位到 DOM 容器上开始（意思是，组件的一个实例被创建并插入到 DOM 中）并呈现在网页上。它由2种方法组成，即：

componentWillMount()：在组件定位到 DOM 之前立即调用的方法，即在组件第一次呈现在屏幕上之前。
componentDidMount()：在组件定位到 DOM 之后立即调用的方法，即在组件第一次在屏幕上呈现之后立即调用。

第 3 阶段：更新
ReactJS 组件生命周期的第三个阶段是更新阶段。在安装阶段之后，它会更新在初始化阶段声明和初始化的状态和属性（如果需要任何更改）。它还负责处理用户交互并在组件层次结构中传递数据。与初始化阶段不同，此阶段可以重复多次。属于此类别的一些生命周期方法如下：

componentWillReceiveProps()：在重新分配已安装组件的 props 之前立即调用的方法。它接受可能与原始道具相同/可能不同的新道具。
shouldComponentUpdate()：在决定是否需要在网页上显示新渲染的道具之前调用的方法。在需要不在屏幕上显示新道具的情况下，它很有用。
componentWillUpdate()：在更新状态和/或属性后重新渲染组件之前立即调用的方法。
componentDidUpdate()：在更新状态和/或属性后重新渲染组件后立即调用的方法。

阶段 4：卸载
卸载是 ReactJS 组件生命周期的最后一个阶段。此阶段包括当组件从 DOM 容器中分离时使用的那些生命周期方法（意味着组件的实例被销毁并从 DOM 中卸载）。它还负责执行所需的清理任务。卸载后，无法再次重新安装组件。

componentWillUnmount()：在组件最终从 DOM 中移除之前调用的方法，即在组件完全从页面中移除时调用的方法，这表明它的生命周期结束。

示例：创建 React 应用程序：

第 1 步：使用以下命令创建一个新的 React 应用程序：
```
npx create-react-app demo-app
```
第 2 步：使用以下命令进入您的项目目录：
```
cd demo-app
```

示例：现在在 App.js 文件中写下以下代码。

App.js

import React, { Component } from "react";
  
class App extends Component {
  constructor(props) {
    super(props);
    this.state = { myState: "GeeksforGeeks" };
    this.changeMyState = this.changeMyState.bind(this);
  }
  render() {
    return (
      
        Phases of ReactJS Component Lifecycle
         {this.state.myState}
        
      
    );
  }
  
  componentWillMount() {
    console.log("Phase 2: MOUNTING -> Component Will Mount!");
  }
  
  componentDidMount() {
    console.log("Phase 2: MOUNTING -> Component Did Mount!");
  }
  
  // Changing in state 
  changeMyState() {
    this.setState({
      myState: "GeeksforGeeks Tutorial on Phases of ReactJS Lifecycle Methods!",
    });
  }
  
  // Props  receiver function 
  componentWillReceiveProps(newProps) {
    console.log("Phase 3: UPDATING -> Component Will Receive Props!");
  }
  
  shouldComponentUpdate(newProps, newState) {
  
    // Phase 3: UPDATING
    return true;
  }
  
  // Updation of component 
  componentWillUpdate(nextProps, nextState) {
    console.log("Phase 3: UPDATING -> Component Will update!");
  }
  
  componentDidUpdate(prevProps, prevState) {
    console.log("Phase 3: UPDATING -> Component Did update!");
  }
  
  // Unmount of component 
  componentWillUnmount() {
    console.log("Phase 3: UNMOUNTING -> Component Will unmount!");
  }
}
  
export default App;

运行文件：您可以保存此文件，然后使用以下命令在localhost:3000本地运行您的应用程序：

npm start

输出：