React getDerivedStateFromProps()-Methode

React 组件生命周期React-Komponenten-Lebenszyklus

Das Format der Methode getDerivedStateFromProps() ist wie folgt:

static getDerivedStateFromProps(props, state)

getDerivedStateFromProps wird vor der render-Methode aufgerufen, d. h., bevor DOM-Elemente gerendert werden, und es wird sowohl beim anfänglichen Mounten als auch bei nachfolgenden Aktualisierungen aufgerufen.

Der Wert von state hängt jederzeit von props ab.

getDerivedStateFromProps existiert nur zu einem Zweck: damit die Komponente state aktualisieren kann, wenn sich props ändern.

Diese Methode gibt ein Objekt zurück, um state zu aktualisieren, oder null, um nichts zu aktualisieren.

Das folgende Beispielfavoritesitehat einen Anfangswert vonexample, abergetDerivedStateFromProps()Die Methode verwendetfavsite-Eigenschaft, um den Wert vonfavoritesitezu aktualisieren:

Beispiel

class Header extends React.Component { constructor(props) { super(props); this.state = {favoritesite: "Beispiel"}; } static getDerivedStateFromProps(props, state) { return {favoritesite: props.favsite }; } render() { return ( <h1>Meine Lieblingswebsite ist{this.state.favoritesite}</h1> ); } }

Ausprobieren »

Beispiel

class Header extends React.Component { constructor(props) { super(props); this.state = {favoritesite: "Beispiel"}; } shouldComponentUpdate() { return true; //Hier ändern, damit die Komponente aktualisiert werden kann } changeSite = () => { this.setState({favoritesite: "google"}); } render() { return ( <div> <h1>Meine Lieblingswebsite ist{this.state.favoritesite}</h1> <button type="button" onClick={this.changeSite}>Ändern</button> </div> ); } } const root = ReactDOM.createRoot(document.getElementById("root")); root.render(<Header />);

Ausprobieren »

React 组件生命周期React-Komponenten-Lebenszyklus

Andere Erweiterungen