Explique el ciclo inicial en React que ocurre durante el primer render.

Hemos visto diferentes fases de inicialización, montaje, actualización y desmontaje de métodos del ciclo de vida en las que la fase de montaje juega un papel importante. Entonces, primero comprendamos la fase de montaje y sus submétodos que involucran el ciclo de vida y luego conoceremos el ciclo inicial en el primer renderizado con la ayuda de ejecutar ejemplos de código.

Montaje: métodos que se llaman cuando se crea una instancia del componente y se inserta en el dom.

Requisito previo : Método LifeCycle en ReactJs

Los métodos llamados en orden durante el montaje en el componente basado en clases:

Constructor()

Esta es una función especial que se llamará cada vez que se cree un nuevo componente.

Vinculación de controladores de eventos y estados

No cause efectos secundarios como hacer llamadas ajax

Los super(accesorios) llamaron constructor de clase base y sobrescribieron this.state

getDerivedStateFromProps estático()

Cuando el estado del componente depende de los cambios en los puntales a lo largo del tiempo

El estado inicial del componente depende de los accesorios que se pasan al componente; en tal caso, este método se usa para establecer el estado

No tiene acceso a esta palabra clave, por lo que simplemente devuelve un objeto que representa el nuevo estado.

prestar()

El método required() en el componente de clase

Simplemente lea this.props y this.state y devuelva JSX

es una función pura

No cambie de estado ni interactúe con DOM ni haga llamadas ajax

El método del ciclo de vida de los componentes secundarios también se ejecuta

Siempre que haya un ciclo de montaje y actualización, la función de representación podría ejecutarse y el ciclo de actualización ocurre cada vez que los accesorios cambian y se actualizan el estado.

componenteHizoMontar()

Invocado solo una vez en todo el ciclo de vida de los métodos.

Invocado inmediatamente después de que el componente y todos sus componentes secundarios se hayan procesado en el dom causan efectos secundarios

Cargue datos haciendo requests de red

Entonces, este ciclo u orden descrito anteriormente se sigue inicialmente durante el primer render.

Creando la aplicación React:

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

npx create-react-app foldername

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

cd foldername

Estructura del proyecto:

Ejemplo: este código se ejecutará en el nombre de archivo de la estructura del proyecto que se menciona a continuación . En este ejemplo, tenemos que mostrar que esta secuencia se sigue usando console.log

Aplicación.js

import './App.css'
import { Component } from 'react'
class App extends Component {
    constructor() {
        //constructor call first 
        console.log("1")
        super();
        this.state = {
            name: { 
                firstname: "organisation", 
                lastname: "Article" },
            company: "Geeks for Geeks",
            color: "white"
        };
    }
    componentDidMount() {
        // After first default set value then 
        // componentDidMount execute
        console.log("3")
        setInterval(() => {
            this.setState({ color: 'red' });
        }, 5000)
    }
    render() {
        // Render call second during first cycle
        console.log("2")
        return (
            <div className="App">
                <p
                    style={{
                        color: this.state.color,
                        textAlign: 'center',
                    }}
                >
                    {this.state.name.firstname} 
                    {this.state.name.lastname} ,
                    tell u about {this.state.company}
                </p>

                <button onClick={() => {
                    this.setState(() => {
                        return {
                            name: { 
    firstname: 'Gfg', 
    lastname: 'Initial cycle of RENDER Article'}
                        }
                    });
                }}>change name</button>
            </div>
        );
    }
}

export default App;