Eine kurze Einführung in den setState-Mechanismus unter React

Dieser Artikel bietet Ihnen eine kurze Einführung in den setState-Mechanismus unter React. Ich hoffe, er wird Ihnen als Referenz dienen.

API-Analyse: setState(updater, [callback])

Updater: Datenfunktion/Objekt aktualisieren
Rückruf: Rückruffunktion nach erfolgreichem Update

// updater - Function
this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
});

// update - Object
this.setState({quantity: 2})

Funktionen von setState:

1. Asynchron: React sammelt normalerweise einen Stapel von Komponenten, die aktualisiert werden müssen, und aktualisiert sie dann alle auf einmal, um die Rendering-Leistung sicherzustellen
2. Probleme und Lösungen, die durch die flache Zusammenführung von Objecr.assign() verursacht werden

Nachdem Sie setState zum Ändern des Status verwendet haben, erhalten Sie hierdurch sofort die neuesten Informationen. state Status
Lösung: Es besteht die Anforderung,

// setState回调函数
changeTitle: function (event) {
  this.setState({ title: event.target.value }, () => this.APICallFunction());
},
APICallFunction: function () {
  // Call API with the updated value
}

in der Rückruffunktion von ComponentDidUpdate oder SetState abzurufen. Es muss zweimal in onClick akkumuliert werden, wenn es mit der Objektmethode aktualisiert wird einmal
Lösung: Updater-Funktion verwenden

onClick = () => {
    this.setState({ index: this.state.index + 1 });
    this.setState({ index: this.state.index + 1 });
}

// 最后解析为,后面的数据会覆盖前面的更改，所以最终只加了一次.
Object.assign(
  previousState,
  {index: state.index+ 1},
  {index: state.index+ 1},
)

//正确写法
onClick = () => {
    this.setState((prevState, props) => {
      return {quantity: prevState.quantity + 1};
    });
    this.setState((prevState, props) => {
      return {quantity: prevState.quantity + 1};
    });
}

Vorschläge:

1. Schreiben Sie setstate() nicht in die render()-Funktion, es sei denn, Sie passen die Methode ShouldComponentUpdate selbst an, andernfalls wird dies der Fall sein Verursachen Sie eine Endlosschleife
2 . Sie können dem Status keinen Wert zuweisen, und dies führt nicht zum Rendern, z. B.: this.state.num = 2
3 Wenn Sie Referenzobjekte wie Arrays und Objekte bearbeiten Methoden, die neue Objekte zurückgeben
Array: Push, Pop, Shift, Unshift, Splice dürfen nicht verwendet werden, es können Concat, Slice, Filter und erweiterte Syntax verwendet werden
Objekt: Object.assgin/erweiterte Syntax

setState-Aktualisierungsmechanismus

Wie im Bild gezeigt: ausstehende Warteschlange und Aktualisierungswarteschlange

Das obige ist der detaillierte Inhalt vonEine kurze Einführung in den setState-Mechanismus unter React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!