Que se passe-t-il lorsque vous utilisez this.setState plusieurs fois dans le composant React?

Je voulais vérifier ce qui se passe lorsque vous utilisez this.setState plusieurs fois (2 fois pour le plaisir de la discussion). Je pensais que le composant serait rendu deux fois mais apparemment il n'est rendu qu'une seule fois. Une autre attente que j'avais était que peut-être le deuxième appel à setState passera au premier, mais vous l'avez deviné - a bien fonctionné.

Lien vers un JSfiddle

var Hello = React.createClass({
  render: function() {
    return (
      <div>
        <div>Hello {this.props.name}</div>
        <CheckBox />
      </div>
    );
  }
});

var CheckBox = React.createClass({
  getInitialState: function() {
    return {
      alex: 0
    };
  },

  handleChange: function(event) {
    this.setState({
      value: event.target.value
    });
    this.setState({
      alex: 5
    });
  },

  render: function() {
    alert('render');
    return (
      <div>
        <label htmlFor="alex">Alex</label>
        <input type="checkbox" onChange={this.handleChange} name="alex" />
        <div>{this.state.alex}</div>
      </div>
    );
  }
});

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

Comme vous le verrez, une alerte qui dit «rendu» apparaît sur chaque rendu.

Avez-vous une explication pour expliquer pourquoi cela a fonctionné correctement?

Les lots React indiquent les mises à jour qui se produisent dans les gestionnaires d'événements et les méthodes de cycle de vie. Ainsi, si vous mettez à jour l'état plusieurs fois dans un <div onClick />gestionnaire, React attendra la fin de la gestion des événements avant de re-rendre.

Pour être clair, cela ne fonctionne que dans les gestionnaires d'événements synthétiques contrôlés par React et les méthodes de cycle de vie. Les mises à jour d'état ne sont pas regroupées dans AJAX et les setTimeoutgestionnaires d'événements, par exemple.

La méthode setState () ne met pas immédiatement à jour l'état du composant, elle met simplement la mise à jour dans une file d'attente pour être traitée ultérieurement. React peut regrouper plusieurs demandes de mise à jour pour rendre le rendu plus efficace. Pour cette raison, des précautions particulières doivent être prises lorsque vous essayez de mettre à jour l'état en fonction de l'état précédent du composant.

Par exemple, le code suivant incrémentera uniquement l'attribut de valeur d'état de 1 même s'il a été appelé 4 fois:

 class Counter extends React.Component{
   constructor(props){
     super(props)
    //initial state set up
     this.state = {value:0}
   }
   componentDidMount(){
    //updating state
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
    this.setState({value:this.state.value+1})
   }
   render(){
    return <div>Message:{this.state.value}</div>
   }
}

Afin d'utiliser un état après sa mise à jour, faites toute la logique dans l'argument de rappel:

//this.state.count is originally 0
this.setState({count:42}, () => {
  console.log(this.state.count)
//outputs 42
})

La méthode setState (updater, [callback]) peut prendre une fonction de mise à jour comme premier argument pour mettre à jour l'état en fonction de l'état et des propriétés précédents. La valeur de retour de la fonction de mise à jour sera fusionnée de manière superficielle avec l'état précédent du composant. La méthode met à jour l'état de manière asynchrone, il existe donc un rappel d'option qui sera appelé une fois que l'état a terminé la mise à jour complète.

Exemple:

this.setState((prevState, props) => { 
return {attribute:"value"}
})

Voici un exemple de mise à jour de l'état en fonction de l'état précédent:

    class Counter extends React.Component{
      constructor(props) {
        super(props)
    //initial state set up
        this.state = {message:"initial message"}
    }
      componentDidMount() {
    //updating state
        this.setState((prevState, props) => {
          return {message: prevState.message + '!'}
        })
     }
     render(){
       return <div>Message:{this.state.message}</div>
     }
  }