ReactJS 生命周期方法在 Mounting 中的顺序

React 中的每个组件都必须经过三个阶段，即挂载、更新和卸载。这些在 react.js 中被称为生命周期方法。在这三者中，安装是生命周期的第一阶段。

此阶段有四种方法，这些方法是：

• 构造函数（）
• getDerivedStateFromProps()
• 使成为（）
• 组件DidMount()

四个中的 render() 是强制方法，而其他方法是可选的。

先决条件：

• react.js相关知识

创建 React 应用程序：

第 1 步：使用以下命令创建一个 React 应用程序：

npx create-react-app project

第2步：创建项目文件夹（即项目）后，使用以下命令移动到该文件夹：

cd project

项目结构：它看起来像这样。

注意：通过更改 App.js 文件中的代码，一一学习所有四种方法。

1. Constructor()：使用props调用constructor()方法。它从父构造函数继承属性和方法。

在这个文件中，我们创建了一个以 props 作为参数的构造函数，我们使用 super(props) 继承属性。我们正在创建一个值为“user”的州名。我们在

标签中进一步调用状态。

示例：这是一个简单的示例，说明具有值“用户”的状态名称：

Javascript

import React, { Component } from "react";
  
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { name: 'user' };
    }
    render() {
        return (
            

                
Welcome {this.state.name}
            
        );
    }
}
  
export default App

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：

2. getDerivedStateFromProps()： getDerivedStateFromProps()方法将状态作为参数，返回null或状态变化的对象。

示例：在此示例中，我们创建了一个静态 getDerivedStateFromProps()，它将状态名称从“用户”更改为“新用户”。

Javascript

import React, { Component } from "react";
  
class App extends Component {
    constructor(props) {
        super(props);
        this.state = { name: 'user' };
    }
    static getDerivedStateFromProps(props) {
        return { name: 'newUser' };
    }
    render() {
  
  
        return (
            

                
Welcome {this.state.name}
            
        );
    }
}
  
export default App

输出：

3. render()： render() 方法将 HTML 输出到 DOM。

示例：在此示例中，我们只是在标题标签中显示文本。

Javascript

import React, { Component } from "react";
  
class App extends Component {
    render() {
        return (
            

                
Welcome Geek
            
        );
    }
}
  
export default App

输出：

4. componentDidMount()：组件渲染后调用componentDidMount()。当元素已经在DOM中时它会工作。

示例：在此示例中，我们正在创建一个带有 setTimout函数的 componentDidMount()，它会在 2 秒后将状态名称从“user”更改为“GeekUser”。

Javascript

import React,{Component} from "react";
  
class App extends Component {
   constructor(props) {
      super(props);
      this.state = {name:'user'};
   }
   componentDidMount() {
    setTimeout(() => {
      this.setState({name: "GeekUser"})
    }, 2000)
  }
render() {
   return (
      

        
Welcome {this.state.name}
      
     );
   }
 }
  
export default App

输出：

我们如何找到挂载中生命周期方法的顺序？

在这个例子中，我们将所有四个函数加在一起。首先，我们正在创建一个包含 console.log 消息的构造函数，然后我们正在创建一个静态 getDerivedStateFromProps()，它还将在控制台上显示一条消息并返回 null。

对于 render() 和 ComponentDidMount() 方法，我们还添加了一些文本以在控制台中查看。

示例：运行代码后，与方法关联的消息在控制台中出现的顺序是它们在挂载期间遵循的顺序。

Javascript

import React from "react";
  
class App extends React.Component {
    constructor(props) {
        super(props);
        console.log("This is Constructor");
        this.state = { color: 'red' };
    }
    static getDerivedStateFromProps() {
        console.log("getDerivedStateFromProps()");
        return null;
  
    }
    componentDidMount() {
        console.log("componentDidMount");
    }
    render() {
        console.log("render");
  
        return (
            

        );
    }
}
  
export default App

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

现在，打开检查器 Ctrl + Shift + C并单击控制台选项卡。

输出：

我们可以看到这是挂载中生命周期方法的顺序。首先挂载constructor()方法，然后是getDerivedStateFromProps()方法，然后是render()方法，然后是componentDidMount()方法。