Analyse des problèmes asynchrones de setSate de React

Le contenu de cet article concerne l'analyse du problème asynchrone de setSate de React. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Quand on lit la documentation, la plupart d'entre eux disent que le setState de React est asynchrone, mais est-il vraiment asynchrone ? Si tel est le cas, alors nous pouvons également deviner : peut-il être synchronisé ? Alors, quand doit-il être asynchrone et quand doit-il être synchronisé ?

Jetons d'abord un coup d'œil à la description officielle de setSate par React :

Considérez setState() comme une requête plutôt que comme une commande pour exécuter immédiatement le composant de mise à jour. Pour de meilleures performances, React peut le différer et mettre à jour ces composants en même temps plus tard. React ne garantit pas que les résultats modifiés seront disponibles immédiatement après setState.

Un exemple très classique :

// 初始state.count 当前为 0
componentDidMount(){
    this.setState({count: state.count + 1});
    console.log(this.state.count)
}

Si vous êtes familier avec React, vous devez savoir que le résultat final en sortie est 0, et non 1.

Regardons un autre exemple

class Demo extends Component {
  constructor(props) {
    super(props);
    this.state = { number: 0 };
  }
  render() {
    return <button ref="button" onClick={this.onClick.bind(this)}>点我</button>;
  }
  componentDidMount() {
    //手动绑定mousedown事件
    this.refs.button.addEventListener(
      "mousedown",
      this.onClick.bind(this)
    );
   
    //setTimeOut
    setTimeout(this.onClick.bind(this), 1000);
  }
  onClick(event) {
    if (event) {
      console.log(event.type);
    } else {
      console.log("timeout");
    }
    console.log("prev state:", this.state.number);
    this.setState({
      number: this.state.number + 1
    });
    console.log("next state:", this.state.number);
  }
}
export {Demo};

Utilisez 3 méthodes pour mettre à jour l'état dans ce composant

 1.在p节点中绑定onClick事件
 2.在componentDidMount中手动绑定mousedown事件
 3.在componentDidMount中使用setTimeout调用onClick

Après avoir cliqué sur le composant, pouvez-vous deviner le résultat ? Le résultat de sortie est :

timeout
prev state: 0
next state: 1
mousedown
prev state: 1
next state: 2
click
prev state: 2
next state: 2

Le résultat semble un peu inattendu, seul l'événement onClick lié à p est généré, ce qui peut prouver que setState est un résultat asynchrone. montre que setState semble être synchrone.

Résumé :
1. Dans le cycle de vie du composant ou la liaison d'événement de réaction, setState est mis à jour de manière asynchrone.
2. L'appel de setState dans un rappel retardé ou un rappel natif lié à un événement n'est pas nécessairement asynchrone.

Ce résultat ne signifie pas que l'instruction selon laquelle setState est exécuté de manière asynchrone est fausse. Une affirmation plus précise est que setState ne peut pas garantir une exécution synchrone.

Cet article est terminé ici. Pour d'autres contenus passionnants, vous pouvez prêter attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !

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!