Cosa succede quando si utilizza this.setState più volte nel componente React?

Volevo controllare cosa succede quando usi this.setState più volte (2 volte per il bene della discussione). Ho pensato che il componente verrà renderizzato due volte ma a quanto pare è renderizzato solo una volta. Un'altra aspettativa che avevo era che forse la seconda chiamata per setState verrà eseguita sulla prima, ma hai indovinato - ha funzionato bene.

Collegamento a 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')
);

Come vedrai, ad ogni rendering viene visualizzato un avviso che dice "render".

Hai una spiegazione del motivo per cui ha funzionato correttamente?

I batch React stato gli aggiornamenti che si verificano nei gestori di eventi e nei metodi del ciclo di vita. Pertanto, se aggiorni lo stato più volte in un <div onClick />gestore, React attenderà che la gestione degli eventi finisca prima di eseguire nuovamente il rendering.

Per essere chiari, questo funziona solo nei gestori di eventi sintetici controllati da React e nei metodi del ciclo di vita. Gli aggiornamenti di stato non vengono raggruppati in batch in AJAX e nei setTimeoutgestori di eventi, ad esempio.

Il metodo setState () non aggiorna immediatamente lo stato del componente, ma mette semplicemente l'aggiornamento in una coda per essere elaborato in seguito. React può raggruppare più richieste di aggiornamento insieme per rendere il rendering più efficiente. Per questo motivo, è necessario adottare precauzioni speciali quando si tenta di aggiornare lo stato in base allo stato precedente del componente.

Ad esempio, il codice seguente incrementerà solo di 1 l'attributo del valore di stato anche se è stato chiamato 4 volte:

 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>
   }
}

Per utilizzare uno stato dopo che è stato aggiornato, eseguire tutta la logica nell'argomento callback:

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

Il metodo setState (updater, [callback]) può accettare una funzione di aggiornamento come primo argomento per aggiornare lo stato in base allo stato e alle proprietà precedenti. Il valore restituito dalla funzione di aggiornamento verrà leggermente unito allo stato del componente precedente. Il metodo aggiorna lo stato in modo asincrono, quindi esiste un'opzione callback che verrà chiamata una volta che lo stato avrà terminato l'aggiornamento completo.

Esempio:

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

Ecco un esempio di come aggiornare lo stato in base allo stato precedente:

    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>
     }
  }