ReactJS - Wird das Rendering jedes Mal aufgerufen, wenn "setState" aufgerufen wird?

Rendert React bei jedem setStateAufruf alle Komponenten und Unterkomponenten neu ?

Wenn ja warum? Ich dachte, die Idee war, dass React nur so wenig wie nötig rendert - wenn sich der Zustand ändert.

Im folgenden einfachen Beispiel werden beide Klassen erneut gerendert, wenn auf den Text geklickt wird, obwohl sich der Status bei nachfolgenden Klicks nicht ändert, da der onClick-Handler stateden Wert immer auf denselben Wert setzt:

this.setState({'test':'me'});

Ich hätte erwartet, dass das Rendern nur stattfinden würde, wenn sich die stateDaten geändert hätten.

Hier ist der Code des Beispiels als JS-Geige und eingebettetes Snippet:

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

[1]: http://jsfiddle.net/fp2tncmb/2/

Rendert React bei jedem Aufruf von setState alle Komponenten und Unterkomponenten neu?

Standardmäßig - ja.

Es gibt eine Methode boolean shouldComponentUpdate (Objekt nextProps, Objekt nextstate) , wobei jede Komponente dieser Methode hat und es ist verantwortlich , um zu bestimmen „sollte das Komponenten - Update (run machen - Funktion)?“ Jedes Mal, wenn Sie den Status ändern oder neue Requisiten von der übergeordneten Komponente übergeben.

Sie können Ihre eigene Implementierung der shouldComponentUpdate- Methode für Ihre Komponente schreiben , die Standardimplementierung gibt jedoch immer true zurück. Dies bedeutet , dass die Renderfunktion immer erneut ausgeführt wird.

Zitat aus offiziellen Dokumenten http://facebook.github.io/react/docs/component-specs.html#updating-shouldcomponentupdate

Standardmäßig gibt shouldComponentUpdate immer true zurück, um subtile Fehler zu vermeiden, wenn der Status an Ort und Stelle mutiert ist. Wenn Sie jedoch darauf achten, den Status immer als unveränderlich zu behandeln und von Requisiten und Status in render () schreibgeschützt zu sein, können Sie shouldComponentUpdate mit überschreiben Eine Implementierung, die die alten Requisiten und den Zustand mit ihren Ersetzungen vergleicht.

Nächster Teil Ihrer Frage:

Wenn ja warum? Ich dachte, die Idee war, dass React nur so wenig wie nötig rendert - wenn sich der Zustand ändert.

Es gibt zwei Schritte, die wir "Rendern" nennen können:

1. Virtuelles DOM-Rendern: Wenn die Rendermethode aufgerufen wird, wird eine neue virtuelle Dom- Struktur der Komponente zurückgegeben. Wie ich schon erwähnt, dies machen wird Methode aufgerufen immer , wenn Sie anrufen setState () , weil shouldComponentUpdate immer true zurückgibt standardmäßig. Daher gibt es hier in React standardmäßig keine Optimierung.

2. Native DOM-Renderings: React ändert echte DOM-Knoten in Ihrem Browser nur, wenn sie im virtuellen DOM geändert wurden und so wenig wie nötig - dies ist die großartige Funktion von React, die die echte DOM-Mutation optimiert und React schnell macht.

Nein, React rendert nicht alles, wenn sich der Status ändert.

• Immer wenn eine Komponente verschmutzt ist (ihr Status wurde geändert), werden diese Komponente und ihre untergeordneten Komponenten neu gerendert. Dies dient bis zu einem gewissen Grad dazu, so wenig wie möglich neu zu rendern. Das einzige Mal, wenn das Rendern nicht aufgerufen wird, wird ein Zweig in einen anderen Stamm verschoben, wo wir theoretisch nichts erneut rendern müssen. In Ihrem Beispiel TimeInChildhandelt es sich um eine untergeordnete Komponente von Main, sodass sie auch neu gerendert wird, wenn sich der Status Mainändert.

• React vergleicht keine Statusdaten. Wenn setStatees aufgerufen wird, markiert es die Komponente als fehlerhaft (was bedeutet, dass sie neu gerendert werden muss). Es ist wichtig zu beachten, dass, obwohl die renderMethode der Komponente aufgerufen wird, das reale DOM nur aktualisiert wird, wenn sich die Ausgabe vom aktuellen DOM-Baum unterscheidet (auch bekannt als Unterschied zwischen dem virtuellen DOM-Baum und dem DOM-Baum des Dokuments). In Ihrem Beispiel statehat sich der Zeitpunkt der letzten Änderung geändert, obwohl sich die Daten nicht geändert haben. Dadurch unterscheidet sich das virtuelle DOM vom DOM des Dokuments, weshalb der HTML-Code aktualisiert wird.

Obwohl dies in vielen anderen Antworten hier angegeben ist, sollte die Komponente entweder:

• Implementieren shouldComponentUpdate, um nur zu rendern, wenn sich Status oder Eigenschaften ändern

• Wechseln Sie zur Erweiterung einer PureComponent , die bereits shouldComponentUpdateintern eine Methode für flache Vergleiche implementiert .

Hier ist ein Beispiel shouldComponentUpdate, das nur für diesen einfachen Anwendungsfall und Demonstrationszwecke funktioniert. Wenn dies verwendet wird, wird die Komponente nicht mehr bei jedem Klick neu gerendert und beim ersten Anzeigen und nach einmaligem Klicken gerendert.

var TimeInChild = React.createClass({
    render: function() {
        var t = new Date().getTime();

        return (
            <p>Time in child:{t}</p>
        );
    }
});

var Main = React.createClass({
    onTest: function() {
        this.setState({'test':'me'});
    },

    shouldComponentUpdate: function(nextProps, nextState) {
      if (this.state == null)
        return true;
  
      if (this.state.test == nextState.test)
        return false;
        
      return true;
  },

    render: function() {
        var currentTime = new Date().getTime();

        return (
            <div onClick={this.onTest}>
            <p>Time in main:{currentTime}</p>
            <p>Click me to update time</p>
            <TimeInChild/>
            </div>
        );
    }
});

ReactDOM.render(<Main/>, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>

Ja. Es ruft die render () -Methode jedes Mal auf, wenn wir stattdessen setState aufrufen, wenn "shouldComponentUpdate" false zurückgibt.

Ein weiterer Grund für "verlorenes Update" kann der nächste sein:

• Wenn das statische getDerivedStateFromProps definiert ist, wird es in jedem Aktualisierungsprozess gemäß der offiziellen Dokumentation https://reactjs.org/docs/react-component.html#updating erneut ausgeführt .
• Wenn dieser Statuswert zu Beginn von Requisiten stammt, wird er bei jedem Update überschrieben.

Wenn es das Problem ist, kann U vermeiden, den Status während der Aktualisierung festzulegen. Sie sollten den Statusparameterwert wie folgt überprüfen

static getDerivedStateFromProps(props: TimeCorrectionProps, state: TimeCorrectionState): TimeCorrectionState {
   return state ? state : {disable: false, timeCorrection: props.timeCorrection};
}

Eine andere Lösung besteht darin, dem Status eine initialisierte Eigenschaft hinzuzufügen und diese beim ersten Mal einzurichten (wenn der Status auf einen Wert ungleich Null initialisiert wird).

Nicht alle Komponenten.

Die stateIn-Komponente sieht aus wie die Quelle des Wasserfalls des Zustands der gesamten APP.

Die Änderung erfolgt also dort, wo der setState aufgerufen hat. Der Baum von rendersdann wird von dort gerufen. Wenn Sie eine reine Komponente verwendet haben, renderwird diese übersprungen.