En este artículo, vamos a explorar los métodos del ciclo de vida de ReactJS. Pero, antes de seguir adelante con los diferentes métodos de ciclo de vida de React, debemos entender qué es.
Como sabemos, todo en este mundo sigue un ciclo (digamos humanos o árboles). Nacemos, crecemos y luego morimos. Casi todo sigue este ciclo en su vida, y los componentes de React también lo hacen. Los componentes se crean (se montan en el DOM), crecen mediante la actualización y luego mueren (se desmontan en el DOM). Esto se conoce como ciclo de vida de un componente.
Existen diferentes métodos de ciclo de vida que React proporciona en diferentes fases de la vida de un componente. React llama automáticamente al método responsable según la fase en la que se encuentre el componente. Estos métodos nos dan un mejor control sobre nuestro componente y podemos manipularlos usando estos métodos.
En la actualidad, sabemos qué son los métodos del ciclo de vida y por qué son importantes. Entonces, ¿cuáles son estos diferentes métodos? Echemos un vistazo a ellos.
Métodos de ciclo de vida
El ciclo de vida de un componente se clasifica en cuatro partes:
- inicialización
- montaje
- actualización, y
- desmontaje .
Analicemos los diferentes métodos de ciclo de vida que están disponibles en estas diferentes fases (es decir, inicialización, montaje, actualización y desmontaje).
Inicialización
Esta es la fase en la que el componente comenzará su viaje configurando el estado (ver más abajo) y los accesorios. Esto generalmente se hace dentro del método constructor (vea a continuación para comprender mejor la fase de inicialización).
class Initialize extends React.Component { constructor(props) { // Calling the constructor of // Parent Class React.Component super(props); // initialization process this.state = { date : new Date(), clickedStatus: false }; }Montaje
El nombre se explica por sí mismo. El montaje es la fase en la que nuestro componente React se monta en el DOM (es decir, se crea e inserta en el DOM).
Esta fase entra en escena después de que se completa la fase de inicialización. En esta fase, nuestro componente se renderiza por primera vez. Los métodos que están disponibles en esta fase son:
1. componenteWillMount ()
Este método se llama justo antes de que un componente se monte en el DOM o se llame al método de representación. Después de este método, el componente se monta.
Nota: No debe realizar llamadas a la API ni realizar cambios en los datos utilizando this.setstate en este método porque se llama antes que el método de representación. Por lo tanto, no se puede hacer nada con el DOM (es decir, actualizar los datos con la respuesta de la API) ya que no se ha montado. Por lo tanto, no podemos actualizar el estado con la respuesta de la API.
2. componentDidMount ()
Este método se llama después de que el componente se monta en el DOM. Al igual que componentWillMount, se llama una vez en un ciclo de vida. Antes de la ejecución de este método, se llama al método render (es decir, podemos acceder al DOM). Podemos hacer llamadas a la API y actualizar el estado con la respuesta de la API.
Eche un vistazo para comprender estos métodos de montaje:
class LifeCycle extends React.Component { componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** } render() { return ( Hello mounting methods!
); } }Actualizando
Esta es la tercera fase por la que pasa nuestro componente. Después de la fase de montaje en la que se ha creado el componente, entra en escena la fase de actualización. Aquí es donde cambia el estado del componente y, por lo tanto, se vuelve a renderizar.
En esta fase, los datos del componente (estado y accesorios) se actualizan en respuesta a eventos del usuario como hacer clic, escribir, etc. Esto da como resultado la re-renderización del componente. Los métodos que están disponibles en esta fase son:
- shouldComponentUpdate ()
Este método determina si el componente debe actualizarse o no. De forma predeterminada, devuelve verdadero. Pero en algún momento, si desea volver a renderizar el componente con alguna condición, el método shouldComponentUpdate es el lugar correcto.
Supongamos, por ejemplo, que solo desea volver a renderizar su componente cuando hay un cambio en la propiedad, luego utilice el poder de este método. Recibe argumentos como nextProps y nextState que nos ayudan a decidir si volver a renderizar haciendo una comparación con el valor de prop actual.
2. componentWillUpdate ()
Como otros métodos, su nombre también se explica por sí mismo. Se llama antes de que tenga lugar la reproducción del componente. Se llama una vez después del método ' shouldComponentUpdate '. Si desea realizar algún cálculo antes de volver a renderizar el componente y después de actualizar el estado y la propiedad, este es el mejor lugar para hacerlo. Al igual que el método 'shouldComponentUpdate', también recibe argumentos como nextProps y nextState.
3. ComponentDidUpdate ()
Este método se llama justo después de volver a renderizar el componente. Una vez que el nuevo componente (actualizado) se actualiza en el DOM, se ejecuta el método ' componentDidUpdate '. Este método recibe argumentos como prevProps y prevState.
Eche un vistazo para comprender mejor los métodos de actualización:
class LifeCycle extends React.Component { constructor(props) { super(props); this.state = { date : new Date(), clickedStatus: false, list:[] }; } componentWillMount() { console.log('Component will mount!') } componentDidMount() { console.log('Component did mount!') this.getList(); } getList=()=>{ /*** method to make api call*** fetch('//api.mydomain.com') .then(response => response.json()) .then(data => this.setState({ list:data })); } shouldComponentUpdate(nextProps, nextState){ return this.state.list!==nextState.list } componentWillUpdate(nextProps, nextState) { console.log('Component will update!'); } componentDidUpdate(prevProps, prevState) { console.log('Component did update!') } render() { return ( Hello Mounting Lifecycle Methods!
); } }Desmontaje
Esta es la última fase del ciclo de vida del componente. Como su nombre indica claramente, el componente se desmonta del DOM en esta fase. El método que está disponible en esta fase es:
1. componentWillUnmount ()
Este método se llama antes de que se lleve a cabo el desmontaje del componente. Antes de eliminar el componente del DOM, se ejecuta ' componentWillUnMount' . Este método denota el final del ciclo de vida del componente.
Aquí hay una representación de diagrama de flujo de los métodos del ciclo de vida:
That’s all about this important part of the React world — lifecycle methods. I hope you enjoyed reading it.
Thanks!