React shouldComponentUpdate()-Methode

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

Das Format der Methode shouldComponentUpdate() ist wie folgt:

shouldComponentUpdate(nextProps, nextState)

shouldComponentUpdate() returns a boolean value that specifies whether React should continue rendering. The default value istrue, i.e.stateDie Komponente wird bei jeder Änderung neu gerendert.

Der Rückgabewert von shouldComponentUpdate() wird verwendet, um zu bestimmen, ob die Ausgabe der React-Komponente durch Änderungen des aktuellen State oder der Props beeinflusst wird. Wenn sich Props oder State ändern, wird shouldComponentUpdate() vor dem Rendern aufgerufen.

Das folgende Beispiel zeigt das Verhalten, wenn die Methode shouldComponentUpdate() false zurückgibt (ein Klick auf die Schaltfläche ändert es nicht):

Beispiel

class Header extends React.Component { constructor(props) { super(props); this.state = {favoritesite: "Beispiel"}; } shouldComponentUpdate() { return false; } 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> ); } }

Ausprobieren »

Das folgende Beispiel demonstriert das Verhalten, wenn die Methode shouldComponentUpdate() true zurückgibt (durch Klicken auf die Schaltfläche kann es geändert werden):

Beispiel

class Header extends React.Component { constructor(props) { super(props); this.state = {favoritesite: "Beispiel"}; } shouldComponentUpdate() { return true; } 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> ); } }

Ausprobieren »

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

Andere Erweiterungen