Estoy un poco confundido con la forma en que ocurre el orden/ejecución del ciclo de vida y cómo se procesan las cosas en el DOM.
Entonces, si tomo el ejemplo a continuación, lo que encuentro es que después de 5 segundos, el control se render
antes de ir a componentDidUpdate
. Sin embargo, en el renderizado, puede imprimir el valor de estado actualizado, es decir, XYZ, incluso antes de que se invoque componentDidUpdate
. Entonces, ¿cómo funciona esto y mientras que componentDidUpdate dice que podemos acceder a los nodos DOM dentro de él, de alguna manera estaba pensando que componentDidUpdate
es cuando el estado realmente se actualiza? ¿No estoy seguro de dónde está la diferencia en términos de mi comprensión?
import React, { Component } from "react"; export default class getSnapshotBeforeUpdateMethod extends Component { constructor(props) { console.log("1 constructor"); super(props); this.state = { name: "ABC" }; } componentDidMount() { console.log("2a componentDidMount"); setTimeout(() => { console.log("2b Inside componentDidMount"); this.setState({ name: "XYZ" }); }, 3000); } getSnapshotBeforeUpdate(prevProps, prevState) { console.log("3 getSnapshotBeforeUpdate"); document.getElementById("previous-state").innerHTML = "The previous state was " + prevState.name; } componentDidUpdate() { console.log("4 componentDidUpdate"); document.getElementById("current-state").innerHTML = "The current state is " + this.state.name; } render() { console.log("5 render"); return ( <> <h5>This is a {this.state.name}</h5> <p id="current-state"></p> <p id="previous-state"></p> </> ); } }
Enlace de Codesandbox https://codesandbox.io/s/class-lifecycle-method-order-0zjk4?file=/src/App.js:0-1055
Tal vez una revisión del diagrama del ciclo de vida de reacción pueda ayudar.
Tenga en cuenta que el método del ciclo de vida de render
se invoca durante la "fase de renderizado" cuando React está renderizando el virtualDOM para calcular la diferencia que necesita para confirmar, o vaciar, al DOM real. Tenga en cuenta también que las funciones/métodos durante esta fase son puros y no tienen efectos secundarios , y React puede pausarlos, cancelarlos o reiniciarlos ( énfasis mío ).
Ahora tenga en cuenta que componentDidUpdate
ocurre durante la "fase de confirmación" cuando el DOM se ha actualizado y renderizado.
Su console.log
en el método de render
es un efecto secundario no intencional, pero le muestra cuándo se llamó en relación con componentDidUpdate
.
render
se llama una vez, o posiblemente varias veces, antes de que se llame una vez al componentDidUpdate
, por ciclo de renderizado.