Méthode React componentDidUpdate()
Cycle de vie du composant React
Le format de la méthode componentDidUpdate() est le suivant :
componentDidUpdate(prevProps, prevState, snapshot)
La méthode componentDidUpdate() est appelée immédiatement après la mise à jour du composant.
Cette méthode n'est pas exécutée lors du rendu initial.
Vous pouvez également appeler setState() directement dans componentDidUpdate(), mais notez qu'il doit être enveloppé dans une instruction conditionnelle.
L'exemple suivant utilisecomponentDidUpdate()La méthode est exécutée après la mise à jour du composant ; le composant utilisecomponentDidMount()La méthode sera1L'opération de modification se produit après quelques secondes :
Exemple
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "exemple"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritesite: "google"})
}, 1000)
}
componentDidUpdate() {
document.getElementById("mydiv").innerHTML =
"Après la mise à jour, le favori est" + this.state.favoritesite;
}
render() {
return (
<div>
<h1>Mon site web préféré est{this.state.favoritesite}</h1>
<div id="mydiv"></div>
</div>
);
}
}
Essayez-le vous-même »