在 ReactJS 中挂载组件意味着什么？

2023-09-18 18:28

在 React 中，组件的每个实例都会经历一个由创建（挂载）、更新和删除（卸载）组成的生命周期。

挂载是创建组件实例并将其插入 DOM 的初始阶段。当组件成功插入 DOM 时，该组件被称为已安装。在更新阶段，组件在 DOM 中存在时会得到更新。在卸载阶段，组件从 DOM 中移除。

React 为我们提供了各种称为生命周期方法的方法，这些方法在该组件生命周期的不同阶段被触发。我们将使用其中一些生命周期方法来查看安装阶段会发生什么。

创建反应应用程序：

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

npx create-react-app mountdemo

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

cd mountdemo

项目结构：它将如下所示。

项目结构

App.js：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。下面的演示应用程序显示了一个在单击按钮时递增的数字。

Javascript

import React from 'react';
  
class App extends React.Component{
  
  constructor(props){
    super(props);
    this.state = { num: 0 };
    this.clickHandler = this.clickHandler.bind(this);
  }
  
  // Button onClick callback function
  clickHandler (event){
    this.setState(state => ({num: state.num + 1}))
  }
  
  // Component lifecycle methods
  // Triggered when component is mounted
  componentDidMount(){
    console.log("Mounted");
  }
    
  // Triggered when component is updated
  componentDidUpdate(){
    console.log("Updated");
  }
  
  render() {
    console.log("Rendered");
    return (
      
        Demo App
        Number: {this.state.num}
        
      
    );
  }
};
  
export default App;

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