Що відбувається при використанні 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')
);

Як ви побачите, сповіщення із написом "render" з'являється під час кожного візуалізації.

У вас є пояснення, чому це спрацювало належним чином?

Реагуйте на оновлення стану пакетів, які відбуваються в обробниках подій та методах життєвого циклу. Таким чином, якщо ви кілька разів оновлюєте стан у <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>
     }
  }