El método componentDidMount() nos permite ejecutar el código React cuando el componente ya está colocado en el DOM (Document Object Model). Este método se llama durante la fase de montaje del ciclo de vida de React, es decir, después de renderizar el componente.
Todas las requests de AJAX y la actualización de estado o DOM deben codificarse en el bloque de método componentDidMount(). También podemos configurar todas las suscripciones principales aquí, pero para evitar problemas de rendimiento, recuerde siempre cancelar la suscripción en el método componentWillUnmount().
Sintaxis:
componentDidMount()
Creando la aplicación React:
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app functiondemo
Paso 2: después de crear la carpeta de su proyecto, es decir, functiondemo , muévase a ella usando el siguiente comando:
cd functiondemo
Estructura del proyecto: Tendrá el siguiente aspecto.
Estructura del proyecto
Ejemplo: en este ejemplo, vamos a crear una aplicación de color de nombre que cambia el color del texto cuando el componente se representa en el árbol DOM.
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.
Javascript
import React from 'react';
class App extends React.Component {
constructor(props) {
super(props);
// Initializing the state
this.state = { color: 'lightgreen' };
}
componentDidMount() {
// Changing the state after 2 sec
// from the time when the component
// is rendered
setTimeout(() => {
this.setState({ color: 'wheat' });
}, 2000);
}
render() {
return (
<div>
<p
style={{
color: this.state.color,
backgroundColor: 'rgba(0,0,0,0.88)',
textAlign: 'center',
paddingTop: 20,
width: 400,
height: 80,
margin: 'auto'
}}
>
GeeksForGeeks
</p>
</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:
