Explicar el ciclo de vida del renderizado del componente debido al renderizado del componente principal

React es una biblioteca de interfaz de usuario que representa componentes escritos en JSX. Puede construir y renderizar cualquier componente según su uso. React.js introduce el concepto de estados y accesorios . Los estados se utilizan para almacenar datos para componentes específicos. Los accesorios se utilizan para pasar datos de los componentes principales a los componentes secundarios. Los estados se pueden actualizar en consecuencia utilizandométodo de estado establecido . Los accesorios solo pueden ser actualizados por el componente principal. La actualización del estado y los accesorios conduce a la representación de la interfaz de usuario. Se llaman diferentes métodos de ciclo de vida durante estas representaciones.

Métodos de ciclo de vida llamados cuando la aplicación se carga primero:

• Método constructor()
• método render()
• método componenteDidMount()

Métodos de ciclo de vida llamados cuando se llama a this.setState:

• método render()
• método componenteDidUpdate()

Enfoque: Vamos a crear un proyecto React y luego crearemos una interfaz de usuario que volverá a renderizar un componente secundario debido a la nueva renderización principal. Los usuarios pueden interactuar con la interfaz de usuario y hacer clic en el botón para activar un evento para llamar a this.setState a través de this. Los usuarios pueden ver todos los métodos de ciclo de vida mencionados anteriormente en la vista de la consola.

Creando proyecto React:

Paso 1: para crear una aplicación de reacción, debe instalar los módulos de reacción a través del comando npx. Se usa «npx» en lugar de «npm» porque necesitará este comando en el ciclo de vida de su aplicación solo una vez.

npx create-react-app project_name

Paso 2: después de crear su proyecto de reacción, muévase a la carpeta para realizar diferentes operaciones.

cd project_name

Estructura del proyecto: después de ejecutar los comandos mencionados en los pasos anteriores, si abre el proyecto en un editor, puede ver una estructura de proyecto similar a la que se muestra a continuación. El nuevo componente que el usuario crea o los cambios de código que realizaremos se realizarán en la carpeta de origen.

Estructura del proyecto

Ejemplo: Vamos a crear un componente padre e hijo. Crearemos un botón que envíe una llamada para actualizar el estado a través de this.setState en el componente principal. El mismo estado se pasa como accesorio al componente secundario. Por lo tanto, el estado actualizará y activará los componentes primarios y secundarios para que se vuelvan a procesar. Podremos ver los métodos del ciclo de vida debido a esta reproducción tanto de padre como de hijo.

Nombre de archivo: App.js 
 

import React from "react";
  
class Child extends React.Component {
  constructor(){
    super();
    console.log("Child Constructor called");
  }
  
  componentDidMount(){
    console.log(" Child componentDidMount called");
  }  
    
  componentDidUpdate(){
    console.log("Child componentDidUpdate called");
  }
  render() {
    console.log("Child render called");
    return (   
<p>{this.props.message}</p>
 );
  }
}
  
class App extends React.Component {
  constructor(){
    super();
    this.state={
      message:"initial state"
    }
    console.log("Parent Constructor called");
  }
  
  componentDidMount(){
    console.log("Parent componentDidMount called");
  }  
    
  componentDidUpdate(){
    console.log("Parent componentDidUpdate called");
  }
  
  call() {
    this.setState({message:"state updated"})
  }
  
  render() {
    console.log("Parent render called");
      
    // Rendering a button
    return (
      <div style={{margin:100}}>
      <button onClick={()=>{this.call()}}>
        Click to update state!
      </button>
        
<p>{this.state.message}</p>
  
      <Child message={this.state.message} />
      </div>
      );
  }
}
export default App;

Paso para ejecutar la aplicación: Abra la terminal y escriba el siguiente comando.

npm start

Salida: Abra su navegador. De manera predeterminada, abrirá una pestaña con localhost ejecutándose (http://localhost:3000/) y podrá ver el resultado que se muestra en la consola. Las funciones apropiadas se llaman cuando se actualiza el estado. En primer lugar, los métodos de ciclo de vida inicial de hijo y padre se pueden ver cuando la interfaz de usuario se carga por primera vez. Luego, a medida que se actualiza el estado, ambos se vuelven a representar y se llaman a los métodos de ciclo de vida apropiados.
 

Representación de niños y padres