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

Question

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

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

In folgendem einfachen Beispiel rendern beide Klassen erneut, wenn der Text angeklickt wird, obwohl sich der Zustand bei aufeinanderfolgenden Klicks nicht ändert, da der onClick-Handler immer den state auf den gleichen Wert setzt:

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

Ich hätte erwartet, dass ein Rendern nur dann stattfindet, wenn sich die Daten des state geändert haben.

Hier ist der Code des Beispiels, als JS Fiddle, und eingebetteter Ausschnitt:

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

        return (
            Zeit im Kind:{t}
        );
    }
});

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

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

        return (

            Zeit im Hauptbereich:{currentTime}
            Klicken Sie auf mich, um die Zeit zu aktualisieren

        );
    }
});

ReactDOM.render(

Answer 1

Es scheint, dass die akzeptierten Antworten nicht mehr zutreffen, wenn React Hooks verwendet werden (mit primitiven Werten, siehe Kommentare zu dieser Antwort für Details). Sie können in diesem Code-Sandbox sehen, dass die Klassenkomponente neu gerendert wird, wenn der Zustand auf denselben Wert gesetzt wird, während in der Funktionskomponente das Setzen des Zustands auf denselben Wert nicht zu einer Neurenderung führt.

https://codesandbox.io/s/still-wave-wouk2?file=/src/App.js

Answer 2

Ein weiterer Grund für "verlorene Aktualisierungen" kann folgender sein:

• Wenn die Methode static getDerivedStateFromProps definiert ist, wird sie gemäß der offiziellen Dokumentation https://reactjs.org/docs/react-component.html#updating bei jedem Aktualisierungsvorgang erneut ausgeführt.
• Also, wenn der Zustandswert zu Beginn aus den Props kommt, wird er bei jedem Update überschrieben.

Wenn dies das Problem ist, können Sie das Setzen des Zustands während eines Updates vermeiden, indem Sie den Zustandsparameterwert wie folgt überprüfen:

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

Eine weitere Lösung besteht darin, eine initialisierte Eigenschaft zum Zustand hinzuzufügen und sie beim ersten Mal zu setzen (wenn der Zustand auf einen nicht-null-Wert initialisiert wird).

Answer 3

Nicht alle Komponenten.

Der Zustand in der Komponente sieht aus wie die Quelle des Wasserfalls des Zustands der ganzen APP.

Also passiert die Änderung von dort, wo der setState aufgerufen wird. Der Baum der Renders wird dann von dort aus aufgerufen. Wenn du PureComponent verwendet hast, wird das render übersprungen.

Answer 4

Unabhängig von den gut erklärten Antworten hier gibt es möglicherweise andere Gründe, warum Sie nach dem Ändern der Props oder des Status die erwartete Änderung nicht sehen:

Achten Sie darauf, dass in dem Code, in dem Sie durch eine Status- oder Prop-Änderung neu rendern möchten, event.preventDefault(); vorhanden ist, da es jegliches abbrechbares Ereignis nach dieser Anweisung abbricht.

Answer 5

Sie könnten setState() nur verwenden, nachdem Sie den aktuellen Zustandswert mit dem neuen verglichen haben und sie sich unterscheiden.