ReactJS - Ciclo de vida de los componentes

En este capítulo, analizaremos los métodos del ciclo de vida de los componentes.

Métodos de ciclo de vida

• componentWillMount se ejecuta antes de renderizar, tanto en el servidor como en el cliente.

• componentDidMountse ejecuta después del primer renderizado solo en el lado del cliente. Aquí es donde deben ocurrir las solicitudes AJAX y DOM o actualizaciones de estado. Este método también se utiliza para la integración con otros marcos de JavaScript y cualquier función con ejecución retrasada, comosetTimeout o setInterval. Lo estamos usando para actualizar el estado para que podamos activar los otros métodos del ciclo de vida.

• componentWillReceivePropsse invoca tan pronto como se actualizan los accesorios antes de que se llame a otro render. Lo activamos desdesetNewNumber cuando actualizamos el estado.

• shouldComponentUpdate debería volver true o falsevalor. Esto determinará si el componente se actualizará o no. Esto está configurado paratruepor defecto. Si está seguro de que el componente no necesita renderizarse despuésstate o props están actualizados, puedes volver false valor.

• componentWillUpdate se llama justo antes de renderizar.

• componentDidUpdate se llama justo después de renderizar.

• componentWillUnmountse llama después de que el componente se desmonta del dom. Estamos desmontando nuestro componente enmain.js.

En el siguiente ejemplo, estableceremos la inicial stateen la función constructora. lossetNewnumber se utiliza para actualizar el state. Todos los métodos del ciclo de vida están dentro del componente Contenido.

App.jsx

import React from 'react';

class App extends React.Component {
   constructor(props) {
      super(props);
      
      this.state = {
         data: 0
      }
      this.setNewNumber = this.setNewNumber.bind(this)
   };
   setNewNumber() {
      this.setState({data: this.state.data + 1})
   }
   render() {
      return (
         <div>
            <button onClick = {this.setNewNumber}>INCREMENT</button>
            <Content myNumber = {this.state.data}></Content>
         </div>
      );
   }
}
class Content extends React.Component {
   componentWillMount() {
      console.log('Component WILL MOUNT!')
   }
   componentDidMount() {
      console.log('Component DID MOUNT!')
   }
   componentWillReceiveProps(newProps) {    
      console.log('Component WILL RECIEVE PROPS!')
   }
   shouldComponentUpdate(newProps, newState) {
      return true;
   }
   componentWillUpdate(nextProps, nextState) {
      console.log('Component WILL UPDATE!');
   }
   componentDidUpdate(prevProps, prevState) {
      console.log('Component DID UPDATE!')
   }
   componentWillUnmount() {
      console.log('Component WILL UNMOUNT!')
   }
   render() {
      return (
         <div>
            <h3>{this.props.myNumber}</h3>
         </div>
      );
   }
}
export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App/>, document.getElementById('app'));

setTimeout(() => {
   ReactDOM.unmountComponentAtNode(document.getElementById('app'));}, 10000);

Después del renderizado inicial, obtendremos la siguiente pantalla.