Quand le setstate de React se synchronise-t-il ?

Le setstate de React est "synchrone" dans les événements natifs et setTimeout, mais "asynchrone" dans les événements synthétiques et les fonctions hook ; dans React, s'il s'agit d'un événement déclenché par React, l'appel de setState ne sera pas synchronisé. Mettez à jour "this.state", les autres appels setState exécuteront "this.state" de manière synchrone.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 18.0.0, ordinateur Dell G3.

Quand le setstate de React sera-t-il synchronisé ? Quand est-ce asynchrone ?

Donnons d'abord la réponse :

Parfois, il se comporte de manière asynchrone, et parfois il se comporte de manière synchrone.

setState est "asynchrone" uniquement dans les événements synthétiques et les fonctions hook, et est synchrone dans les événements natifs et setTimeout.

class Example extends React.Component {
  constructor() {
    super();
    this.state = {
      val: 0
    };
  }
  
  componentDidMount() {
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 1 次 log
    this.setState({val: this.state.val + 1});
    console.log(this.state.val);    // 第 2 次 log
    setTimeout(() => {
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 3 次 log
      this.setState({val: this.state.val + 1});
      console.log(this.state.val);  // 第 4 次 log
    }, 0);
  }
  render() {
    return null;
  }
};

1.setState est "asynchrone" uniquement dans les événements synthétiques et les fonctions hook, et est synchrone dans les événements natifs et setTimeout.

2. Le "asynchrone" de setState ne signifie pas qu'il est implémenté en interne par du code asynchrone. En fait, le processus d'exécution et le code lui-même sont tous synchrones. C'est simplement que la séquence d'appel des événements synthétiques et des fonctions de hook est antérieure. mise à jour,

entraînant des événements synthétiques et La valeur mise à jour ne peut pas être obtenue immédiatement dans la fonction hook, formant ce qu'on appelle "asynchrone". Bien entendu, le résultat mis à jour peut être obtenu via le rappel dans le deuxième paramètre setState(partialState, rappel).

3. L'optimisation de la mise à jour par lots de setState est également basée sur "asynchrone" (événements synthétiques, fonctions hook). Il n'y aura pas de mises à jour par lots dans les événements natifs et setTimeout

Si la même valeur est mise à jour en "asynchrone" If. setState est défini plusieurs fois, la stratégie de mise à jour par lots de setState l'écrasera et la dernière exécution sera effectuée. Si plusieurs valeurs différentes de setState sont définies en même temps, elles seront fusionnées et mises à jour par lots pendant la mise à jour.

Dans React, si le traitement des événements est déclenché par React (comme le traitement des événements déclenché par onClick), l'appel de setState ne mettra pas à jour this.state de manière synchrone. Les autres appels setState exécuteront this.state de manière synchrone. Ce qu'on appelle « en plus » fait référence aux fonctions de traitement d'événements ajoutées directement via addEventListener, en contournant React, et aux appels asynchrones générés via setTimeout/setInterval.

Raison :

Dans l'implémentation de la fonction setState de React, une variable isBatchingUpdates sera utilisée pour déterminer s'il faut mettre à jour this.state directement ou le mettre dans la file d'attente et en parler plus tard. La valeur par défaut de isBatchingUpdates est false. , ce qui signifie que setState mettra à jour ce .state de manière synchrone, cependant, il existe une fonction batchedUpdates. Cette fonction changera isBatchingUpdates en true Lorsque React appelle ce batchedUpdates avant d'appeler la fonction de traitement d'événement, la conséquence est que le processus de traitement d'événement setState. contrôlé par React ne sera pas synchronisé. Mettez à jour this.state.

Veuillez consulter https://github.com/LuNaHaiJiao/blog/issues/26

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!