Reaccionar ciclo de vida - Diferentes fases del ciclo de vida de la reacción con ejemplos

Introducción al ciclo de vida de React

Como sabemos que los componentes son componentes básicos de reacción, es importante saber acerca de las diferentes etapas involucradas en el ciclo de vida de un componente de reacción. En este artículo, describiremos los diferentes eventos y métodos involucrados en el ciclo de vida de un componente. Además, cubriremos algunos ejemplos que brindarán una imagen clara del ciclo de vida del componente React.

Fases del ciclo de vida de reacción

El ciclo de vida de los componentes se define como la secuencia de métodos invocados en diferentes etapas de un componente. Las siguientes son diferentes fases involucradas en el ciclo de vida de un componente de reacción:

1. Inicialización

Esta etapa requiere que el desarrollador defina las propiedades y el estado inicial del componente. Esto se hace en el constructor del componente. El siguiente código muestra la fase de inicialización de un componente de reacción:

Código:

class Test extends React.Component (
constructor(props)
(
//Calling parent class constructor
super(props);
// Set initial state
this.state = ( hello : "Test component!" );
)
)

2. Montaje

El montaje es la fase del ciclo de vida de reacción que se produce después de que se completa la inicialización. El montaje se produce cuando el componente se coloca en el contenedor DOM y el componente se representa en una página web. La fase de montaje tiene dos métodos que son:

• compnentWillMount () : Este método se llama justo antes de que el componente se coloque en DOM, es decir, esta función se llama justo antes de que se ejecute la función de renderizado por primera vez.
• componentDidMount () : Este método se llama justo después de que el componente se coloca en DOM, es decir, esta función se llama justo después de que se ejecute la función de representación. Por primera vez.

Por el nombre de los dos métodos anteriores, hemos entendido la importancia de las palabras clave "Will" y "Did". Ahora está claro que "Will" se usa antes de un evento en particular y "did" se usa en caso de después de un evento en particular.

3. Actualización

La actualización es una fase en la que el estado y las propiedades pobladas en el momento de la inicialización se cambian si es necesario después de algunos eventos del usuario. Las siguientes son diferentes funciones invocadas durante la fase de actualización:

• componentWillReceiveProps (): esta función es independiente del estado del componente. Se llama a este método antes de que un componente que se monta en DOM obtenga sus accesorios reasignados. La función acepta nuevos accesorios que pueden ser idénticos o diferentes de los accesorios originales. Principalmente, se pueden aplicar algunas comprobaciones previas a la representación en este paso.
• shouldComponentUpdate (): a veces es deseable no mostrar los nuevos accesorios en la página de salida. Para lograr esto, este método devuelve falso, lo que significa que los accesorios recién renderizados no deben mostrarse en la página de salida.
• componentWillUpdate (): esta función se llama antes de que un componente se vuelva a representar, es decir, este método se llama una vez antes de que la función de procesamiento se ejecute después de la actualización.
• componentDidUpdate (): esta función se llama después de que un componente se vuelve a representar, es decir, este método se llama una vez después de que la función de procesamiento se ejecuta después de la actualización.

4. Desmontaje

Esta es la última fase en el ciclo de vida del componente y en esta fase, un componente se separa del contenedor DOM . El siguiente método se incluye en esta fase.

• componentWillUnmount (): esta función se invoca antes de que un componente se separe finalmente del contenedor DOM al que se llama este método cuando un componente se elimina completamente de la página y esto muestra el final de su ciclo de vida.

Ejemplo de ciclo de vida de React

Aquí veremos algunos ejemplos de código que muestran el ciclo de vida de un componente de reacción.

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

class TestLifecycle extends React.Component (
constructor(props)
(
super(props);
this.state = ( hello : "React World!" );
)
componentWillMount()
(
console.log("componentWillMount() called");
)
componentDidMount()
(
console.log("componentDidMount() called");
)
changeState()
(
this.setState(( hello : "Changed React World!" ));
)
render()
(
return (
Edubca, Hello( this.state.hello )
Click Here!
);
)
shouldComponentUpdate(nextProps, nextState)
(
console.log("shouldComponentUpdate() called");
return true;
)
componentWillUpdate()
(
console.log("componentWillUpdate() called");
)
componentDidUpdate()
(
console.log("componentDidUpdate() called");
)
)
ReactDOM.render(
,
document.getElementById('root'));

Cuando el programa anterior se ejecuta inicialmente, mostrará el siguiente resultado en la página web.

Al hacer clic en el área Haga clic aquí, el texto cambiará a lo siguiente:

Ahora en la consola, puede ver la secuencia de métodos llamados, la consola mostrará la salida adjunta a continuación:

Después de hacer clic en la pantalla, se realizará una nueva representación que mostrará lo siguiente en la consola:

El resultado de la consola anterior proporciona una comprensión clara de los métodos de reacción del ciclo de vida invocados durante el ciclo de vida del componente de reacción.

Conclusión

Después de cubrir los detalles de las diferentes fases involucradas en el ciclo de vida de la reacción, está claro que hay métodos de ciclo de vida que se llaman automáticamente. Estos métodos de ciclo de vida en diferentes fases de un componente nos dan la libertad de realizar eventos personalizados cuando se crea, actualiza o destruye un componente. Además, estos métodos nos permiten manejar accesorios y cambios de estado, así como integrar fácilmente bibliotecas de terceros.

Artículos recomendados

Esta es una guía para el ciclo de vida de React. Aquí discutimos las fases del ciclo de vida de la reacción, como la inicialización, el montaje, la actualización y el desmontaje junto con el ejemplo. También puede consultar los siguientes artículos para obtener más información:

1. Reaccionar nativo vs reaccionar
2. Ciclo de vida ágil
3. Ciclo de vida de ITIL
4. Herramientas de implementación de Java
5. Guía de botón en React Native