O que acontece ao usar this.setState várias vezes no componente React?

Eu queria verificar o que acontece quando você usa this.setState várias vezes (2 vezes para fins de discussão). Achei que o componente seria renderizado duas vezes, mas aparentemente só foi renderizado uma vez. Outra expectativa que eu tinha era que talvez a segunda chamada para setState superasse a primeira, mas você adivinhou - funcionou bem.

Link para um 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')
);

Como você verá, um alerta que diz 'render' aparece em cada render.

Você tem uma explicação de por que funcionou corretamente?

Atualizações de estado dos lotes React que ocorrem em manipuladores de eventos e métodos de ciclo de vida. Portanto, se você atualizar o estado várias vezes em um <div onClick />manipulador, o React aguardará que o tratamento de eventos termine antes de renderizar novamente.

Para ficar claro, isso só funciona em manipuladores de eventos sintéticos controlados pelo React e métodos de ciclo de vida. As atualizações de estado não são agrupadas em AJAX e setTimeoutmanipuladores de eventos, por exemplo.

O método setState () não atualiza imediatamente o estado do componente, ele apenas coloca a atualização em uma fila para ser processada posteriormente. O React pode agrupar várias solicitações de atualização para tornar a renderização mais eficiente. Devido a isso, precauções especiais devem ser tomadas ao tentar atualizar o estado com base no estado anterior do componente.

Por exemplo, o código a seguir apenas incrementará o atributo de valor de estado em 1, embora tenha sido chamado 4 vezes:

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

Para usar um estado após ter sido atualizado, faça toda a lógica no argumento de retorno de chamada:

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

O método setState (atualizador, [retorno de chamada]) pode assumir uma função atualizador como seu primeiro argumento para atualizar o estado com base no estado anterior e nas propriedades. O valor de retorno da função atualizadora será mesclado superficialmente com o estado anterior do componente. O método atualiza o estado de forma assíncrona, portanto, há um retorno de chamada de opção que será chamado assim que a atualização do estado for concluída.

Exemplo:

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

Aqui está um exemplo de como atualizar o estado com base no estado anterior:

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