React componentDidUpdate() método
Ciclo de vida de componentes React
El formato del método componentDidUpdate() es el siguiente:
componentDidUpdate(prevProps, prevState, snapshot)
El método componentDidUpdate() se llamará inmediatamente después de que el componente se actualice.
Este método no se ejecutará en el primer renderizado.
También puedes llamar a setState() directamente dentro de componentDidUpdate(), pero ten en cuenta que debe estar envuelto en una declaración condicional.
El siguiente ejemplo usacomponentDidUpdate()El método se ejecuta después de la actualización del componente, el componente usacomponentDidMount()El método será1Después de unos segundos, se realiza la operación de modificación:
Ejemplo
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "ejemplo"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritesite: "google"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"Después de la actualización, lo que te gusta es" + this.state.favoritesite;
}
render() {
return (
<div>
<h1> Mi sitio web favorito es{this.state.favoritesite}</h1>
<div id="mydiv"></div>
</div>
);
}
}
Pruébalo »