Что происходит при многократном использовании this.setState в компоненте React?

Я хотел проверить, что происходит, когда вы используете this.setState несколько раз (2 раза для обсуждения). Я думал, что компонент будет отрисован дважды, но, видимо, он отрисовывается только один раз. Еще одно ожидание, которое я ожидал, заключалось в том, что, возможно, второй вызов setState будет выполняться поверх первого, но, как вы уже догадались - все прошло нормально.

Ссылка на 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')
);

Как вы увидите, предупреждение с надписью «рендеринг» появляется при каждом рендеринге.

У вас есть объяснение, почему это сработало правильно?

Реагировать на обновления состояния пакетов, которые происходят в обработчиках событий и методах жизненного цикла. Таким образом, если вы обновляете состояние несколько раз в <div onClick />обработчике, React будет ждать завершения обработки события перед повторным рендерингом.

Чтобы было ясно, это работает только в управляемых React синтетических обработчиках событий и методах жизненного цикла. setTimeoutНапример, обновления состояния не пакетируются в AJAX и обработчиках событий.

Метод setState () не обновляет сразу состояние компонента, он просто помещает обновление в очередь для последующей обработки. React может объединять несколько запросов на обновление, чтобы сделать рендеринг более эффективным. В связи с этим следует соблюдать особые меры предосторожности при попытке обновить состояние на основе предыдущего состояния компонента.

Например, следующий код увеличит атрибут значения состояния только на 1, даже если он был вызван 4 раза:

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

Чтобы использовать состояние после его обновления, выполните всю логику в аргументе обратного вызова:

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

Метод setState (updater, [callback]) может принимать функцию обновления в качестве своего первого аргумента для обновления состояния на основе предыдущего состояния и свойств. Возвращаемое значение функции обновления будет неглубоко объединено с предыдущим состоянием компонента. Метод обновляет состояние асинхронно, поэтому существует обратный вызов параметра, который будет вызываться после полного завершения обновления состояния.

Пример:

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

Вот пример того, как обновить состояние на основе предыдущего состояния:

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