Hält React die Reihenfolge für Statusaktualisierungen aufrecht?

Ich weiß, dass React Statusaktualisierungen zur Leistungsoptimierung asynchron und stapelweise durchführen kann. Daher können Sie niemals darauf vertrauen, dass der Status nach dem Aufruf aktualisiert wird setState. Aber vertrauen können Sie reagieren auf den Zustand in der gleichen Reihenfolge zu aktualisieren , wie setStateaufgerufen wird für

1. die gleiche Komponente?
2. verschiedene Komponenten?

Klicken Sie in den folgenden Beispielen auf die Schaltfläche:

1. Gibt es jemals die Möglichkeit, dass a falsch und b wahr ist für:

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false, b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.setState({ a: true });
    this.setState({ b: true });
  }
}

2. Gibt es jemals die Möglichkeit, dass a falsch und b wahr ist für:

class SuperContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { a: false };
  }

  render() {
    return <Container setParentState={this.setState.bind(this)}/>
  }
}

class Container extends React.Component {
  constructor(props) {
    super(props);
    this.state = { b: false };
  }

  render() {
    return <Button onClick={this.handleClick}/>
  }

  handleClick = () => {
    this.props.setParentState({ a: true });
    this.setState({ b: true });
  }
}

Denken Sie daran, dass dies extreme Vereinfachungen meines Anwendungsfalls sind. Mir ist klar, dass ich dies anders machen kann, z. B. indem ich in Beispiel 1 beide Statusparameter gleichzeitig aktualisiere und die zweite Statusaktualisierung in einem Rückruf zur ersten Statusaktualisierung in Beispiel 2 durchführe. Dies ist jedoch nicht meine Frage. und ich bin nur daran interessiert, ob es eine genau definierte Art und Weise gibt, wie React diese Statusaktualisierungen durchführt, sonst nichts.

Jede durch Dokumentation gesicherte Antwort wird sehr geschätzt.

Ich arbeite an React.

TLDR:

Aber können Sie darauf vertrauen, dass React den Status in der Reihenfolge aktualisiert, in der setState aufgerufen wird?

• die gleiche Komponente?

Ja.

• verschiedene Komponenten?

Ja.

Die Reihenfolge der Updates wird immer eingehalten. Ob Sie einen Zwischenzustand "zwischen" ihnen sehen oder nicht, hängt davon ab, ob Sie sich in einem Stapel befinden oder nicht.

Derzeit (React 16 und früher) werden standardmäßig nur Aktualisierungen in React-Ereignishandlern gestapelt . Es gibt eine instabile API, um das Batching außerhalb von Ereignishandlern in seltenen Fällen zu erzwingen, wenn Sie es benötigen.

In zukünftigen Versionen (wahrscheinlich React 17 und höher) stapelt React standardmäßig alle Updates, sodass Sie nicht darüber nachdenken müssen. Wie immer werden wir diesbezügliche Änderungen im React-Blog und in den Versionshinweisen bekannt geben.

Der Schlüssel zum Verständnis ist, dass unabhängig davon, wie viele setState()Aufrufe in wie vielen Komponenten Sie in einem React-Ereignishandler ausführen , am Ende des Ereignisses nur ein einziges erneutes Rendern erzeugt wird . Dies ist entscheidend für eine gute Leistung in großen Anwendungen , denn wenn Childund Parentjeden Anruf , setState()wenn einem Klick Event - Handling, Sie wollen nicht wieder machen die Childzweimal.

In beiden Beispielen werden setState()Aufrufe in einem React-Ereignishandler ausgeführt. Daher werden sie am Ende des Ereignisses immer zusammengespült (und Sie sehen den Zwischenzustand nicht).

Die Aktualisierungen werden immer flach in der Reihenfolge zusammengeführt, in der sie auftreten . Wenn also das erste Update ist {a: 10}, ist das zweite {b: 20}und das dritte ist {a: 30}der gerenderte Zustand {a: 30, b: 20}. Das neuere Update auf denselben Statusschlüssel (z. B. wie ain meinem Beispiel) "gewinnt" immer.

Das this.stateObjekt wird aktualisiert, wenn die Benutzeroberfläche am Ende des Stapels erneut gerendert wird. Wenn Sie also den Status basierend auf einem vorherigen Status aktualisieren müssen (z. B. das Inkrementieren eines Zählers), sollten Sie die Funktionsversion verwenden setState(fn), die den vorherigen Status angibt, anstatt aus zu lesen this.state. Wenn Sie neugierig auf die Gründe dafür sind, habe ich dies in diesem Kommentar ausführlich erläutert .

In Ihrem Beispiel wird der "Zwischenstatus" nicht angezeigt, da wir uns in einem React-Ereignishandler befinden, in dem die Stapelverarbeitung aktiviert ist (weil React "weiß", wann wir dieses Ereignis beenden).

Sowohl in React 16 als auch in früheren Versionen gibt es jedoch außerhalb der React-Ereignishandler standardmäßig noch keine Stapelverarbeitung . Wenn wir in Ihrem Beispiel stattdessen einen AJAX-Antworthandler hätten handleClick, setState()würde jeder sofort verarbeitet, sobald dies geschieht. In diesem Fall ja, man würde einen Zwischenzustand sehen:

promise.then(() => {
  // We're not in an event handler, so these are flushed separately.
  this.setState({a: true}); // Re-renders with {a: true, b: false }
  this.setState({b: true}); // Re-renders with {a: true, b: true }
  this.props.setParentState(); // Re-renders the parent
});

Wir wissen, dass es unpraktisch ist, dass das Verhalten unterschiedlich ist, je nachdem, ob Sie sich in einem Event-Handler befinden oder nicht . Dies wird sich in einer zukünftigen React-Version ändern, die standardmäßig alle Updates stapelt (und eine Opt-In-API bereitstellt, um Änderungen synchron zu löschen). Bis wir das Standardverhalten ändern (möglicherweise in React 17), gibt es eine API, mit der Sie das Batching erzwingen können :

promise.then(() => {
  // Forces batching
  ReactDOM.unstable_batchedUpdates(() => {
    this.setState({a: true}); // Doesn't re-render yet
    this.setState({b: true}); // Doesn't re-render yet
    this.props.setParentState(); // Doesn't re-render yet
  });
  // When we exit unstable_batchedUpdates, re-renders once
});

Intern React-Ereignishandler werden alle eingeschlossen, unstable_batchedUpdatesweshalb sie standardmäßig gestapelt sind. Beachten Sie, dass das unstable_batchedUpdateszweimalige Umschließen eines Updates keine Auswirkungen hat. Die Aktualisierungen werden gelöscht, wenn wir den äußersten unstable_batchedUpdatesAnruf beenden .

Diese API ist "instabil" in dem Sinne, dass wir sie entfernen, wenn die Stapelverarbeitung bereits standardmäßig aktiviert ist. Wir werden es jedoch in einer Nebenversion nicht entfernen, sodass Sie sich bis React 17 sicher darauf verlassen können, wenn Sie in einigen Fällen das Stapeln außerhalb der React-Ereignishandler erzwingen müssen.

Zusammenfassend ist dies ein verwirrendes Thema, da standardmäßig nur Stapel in Ereignishandlern reagieren. Dies wird sich in zukünftigen Versionen ändern, und das Verhalten wird dann einfacher sein. Die Lösung besteht jedoch nicht darin, weniger zu stapeln , sondern standardmäßig mehr zu stapeln. Das werden wir tun.

Dies ist eigentlich eine ziemlich interessante Frage, aber die Antwort sollte nicht zu kompliziert sein. Es gibt diesen großartigen Artikel auf Medium , der eine Antwort hat.

1) Wenn Sie dies tun

this.setState({ a: true });
this.setState({ b: true });

Ich denke nicht, dass es eine Situation geben awird, in der es aufgrund von Chargen sein wird trueund sein bwird .false

Allerdings , wenn bdavon abhängig ista ja dann könnte es eine Situation, wo Sie den erwarteten Zustand nicht erhalten würden.

// assuming this.state = { value: 0 };
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});

Nachdem alle oben genannten Anrufe bearbeitet wurden this.state.value, ist 1, nicht 3, wie Sie es erwarten würden.

Dies wird im Artikel erwähnt: setState accepts a function as its parameter

// assuming this.state = { value: 0 };
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));
this.setState((state) => ({ value: state.value + 1}));

Das wird uns geben this.state.value === 3

Mehrere Anrufe während desselben Zyklus können zusammen gestapelt werden. Wenn Sie beispielsweise versuchen, eine Artikelmenge mehr als einmal im selben Zyklus zu erhöhen, ergibt dies Folgendes:

Object.assign(
  previousState,
  {quantity: state.quantity + 1},
  {quantity: state.quantity + 1},
  ...
)

https://reactjs.org/docs/react-component.html

wie in doc

setState () stellt Änderungen am Komponentenstatus in die Warteschlange und teilt React mit, dass diese Komponente und ihre untergeordneten Komponenten mit dem aktualisierten Status neu gerendert werden müssen. Dies ist die primäre Methode, mit der Sie die Benutzeroberfläche als Reaktion auf Ereignishandler und Serverantworten aktualisieren.

Die Änderung wird wie in der Warteschlange ( FIFO : First In First Out) durchgeführt. Der erste Aufruf erfolgt zuerst