¿Qué significa que un componente se monte en ReactJS?

En React, cada instancia de un componente pasa por un ciclo de vida que consiste en la creación (montaje), actualización y eliminación (desmontaje). 

El montaje es la fase inicial en la que se crea la instancia del componente y se inserta en el DOM. Cuando el componente se inserta con éxito en el DOM, se dice que el componente está montado. En la fase de actualización , el componente se actualiza mientras está presente en el DOM. En la fase de desmontaje , el componente se elimina del DOM.

React nos proporciona varios métodos llamados métodos de ciclo de vida que se activan durante diferentes fases del ciclo de vida de ese componente. Usaremos algunos de estos métodos de ciclo de vida para ver qué sucede en la fase de montaje.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app mountdemo

Paso 2: después de crear la carpeta de su proyecto, es decir, mountdemo , acceda a ella con el siguiente comando:

cd mountdemo

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

App.js: ahora escriba el siguiente código en el archivo App.js. Aquí, la aplicación es nuestro componente predeterminado donde hemos escrito nuestro código. La siguiente aplicación de demostración muestra un número que se incrementa al hacer clic en el botón. 

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;

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:

npm start

Producción:

Visualización de la salida de la consola 

Nota: De la salida, tenga en cuenta que el componente se monta solo después del renderizado inicial. Después de actualizar el estado, el componente solo se vuelve a renderizar.

Conclusión: Vimos que el componente se monta cuando se ha creado e insertado en el DOM. Además, actualizar el componente volverá a renderizar el componente y no lo volverá a montar.

Referencia: https://reactjs.org/docs/react-component.html#mounting