React getSnapshotBeforeUpdate()-Methode
React-Komponenten-Lebenszyklus
Das Format der getSnapshotBeforeUpdate()-Methode lautet wie folgt:
getSnapshotBeforeUpdate(prevProps, prevState)
Die getSnapshotBeforeUpdate()-Methode wird aufgerufen, bevor die zuletzt gerenderte Ausgabe in den DOM-Knoten übernommen wird.
In der getSnapshotBeforeUpdate()-Methode können wir auf die Props und den State vor dem Update zugreifen.
Die getSnapshotBeforeUpdate()-Methode muss zusammen mit der componentDidUpdate()-Methode verwendet werden, andernfalls tritt ein Fehler auf.
Das folgende Beispiel verwendet diegetSnapshotBeforeUpdate()-Methode, um den Wert des State-Objekts vor dem Update anzuzeigen. Das Beispiel zeigt nach einer Verzögerung von 1 Sekunde die unterschiedlichen Werte vor und nach dem Update an:
Beispiel
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {favoritesite: "example"};
}
componentDidMount() {
setTimeout(() => {
this.setState({favoritesite: "google"})
}, 1000)
}
getSnapshotBeforeUpdate(prevProps, prevState) {
document.getElementById("div1").innerHTML =
"Die Lieblingswebsite vor dem Update ist:" + prevState.favoritesite;
}
componentDidUpdate() {
document.getElementById("div2").innerHTML =
"Die Lieblingswebsite nach dem Update ist:" + this.state.favoritesite;
}
render() {
return (
<div>
<h1> Meine Lieblingswebsite ist{this.state.favoritesite}</h1>
<div id="div1"></div>
<div id="div2"></div>
</div>
);
}
}
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<Header />);
Ausprobieren »