Что означает монтирование компонента в ReactJS?

В React каждый экземпляр компонента проходит жизненный цикл, состоящий из создания (монтирования), обновления и удаления (размонтирования).

Монтаж — это начальная фаза, на которой экземпляр компонента создается и вставляется в DOM. Когда компонент успешно вставляется в DOM, считается, что компонент смонтирован. На этапе обновления компонент обновляется, пока он присутствует в DOM. На этапе размонтирования компонент удаляется из DOM.

React предоставляет нам различные методы, называемые методами жизненного цикла, которые запускаются на разных этапах жизненного цикла этого компонента. Мы будем использовать некоторые из этих методов жизненного цикла, чтобы увидеть, что происходит на этапе монтажа.

Создание React-приложения

Шаг 1: Создайте приложение React с помощью следующей команды:

npx create-react-app mountdemo

Шаг 2: После создания папки проекта, т. е. mountdemo, перейдите к ней с помощью следующей команды:

cd mountdemo

Структура проекта: Это будет выглядеть следующим образом.

Project Structure

App.js: Теперь запишите следующий код в файл App.js. Здесь приложение является нашим компонентом по умолчанию, в котором мы написали наш код. В приведенном ниже демонстрационном приложении отображается число, которое увеличивается при нажатии кнопки.

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 (

      <div>

        <h1>Demo App</h1>

        <p>Number: {this.state.num}</p>

        <button onClick={this.clickHandler}>increment</button>

      </div>

    );

  }

};

 

export default App;

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:

npm start

Выход:

Визуализация вывода консоли

Примечание. Из вывода следует, что компонент монтируется только после начальной визуализации. После обновления состояния компонент только перерисовывается.

Вывод: мы увидели, что компонент монтируется, когда он создан и вставлен в DOM. Кроме того, обновление компонента приведет к повторному рендерингу компонента, а не к его повторному монтированию.