Điều gì xảy ra khi sử dụng this.setState nhiều lần trong thành phần React?

Tôi muốn kiểm tra điều gì sẽ xảy ra khi bạn sử dụng this.setState nhiều lần (2 lần vì lợi ích của cuộc thảo luận). Tôi nghĩ rằng thành phần sẽ được hiển thị hai lần nhưng dường như nó chỉ được hiển thị một lần. Một kỳ vọng khác mà tôi có là có thể cuộc gọi thứ hai cho setState sẽ chạy trên lệnh đầu tiên, nhưng bạn đoán nó - hoạt động tốt.

Liên kết đến một 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')
);

Như bạn sẽ thấy, một cảnh báo cho biết 'kết xuất' sẽ bật lên trên mỗi kết xuất.

Bạn có lời giải thích tại sao nó hoạt động bình thường không?

Phản ứng hàng loạt cập nhật trạng thái xảy ra trong trình xử lý sự kiện và phương thức vòng đời. Do đó, nếu bạn cập nhật trạng thái nhiều lần trong một <div onClick />trình xử lý, React sẽ đợi quá trình xử lý sự kiện kết thúc trước khi hiển thị lại.

Nói rõ hơn, điều này chỉ hoạt động trong các phương thức vòng đời và trình xử lý sự kiện tổng hợp do React kiểm soát. setTimeoutVí dụ: cập nhật trạng thái không được cập nhật trong AJAX và trình xử lý sự kiện.

Phương thức setState () không cập nhật ngay trạng thái của thành phần, nó chỉ đặt bản cập nhật vào hàng đợi để xử lý sau. React có thể gộp nhiều yêu cầu cập nhật lại với nhau để kết xuất hiệu quả hơn. Do đó, phải thực hiện các biện pháp phòng ngừa đặc biệt khi bạn cố gắng cập nhật trạng thái dựa trên trạng thái trước đó của thành phần.

Ví dụ: mã sau sẽ chỉ tăng thuộc tính giá trị trạng thái lên 1 mặc dù nó được gọi 4 lần:

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

Để sử dụng một trạng thái sau khi nó đã được cập nhật, hãy thực hiện tất cả logic trong đối số gọi lại:

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

Phương thức setState (updater, [callback]) có thể nhận một hàm updater làm đối số đầu tiên của nó để cập nhật trạng thái dựa trên trạng thái và thuộc tính trước đó. Giá trị trả về của hàm updater sẽ được hợp nhất nông với trạng thái thành phần trước đó. Phương thức cập nhật trạng thái không đồng bộ, do đó, có một tùy chọn gọi lại sẽ được gọi sau khi trạng thái cập nhật xong hoàn toàn.

Thí dụ:

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

Dưới đây là một ví dụ về cách cập nhật trạng thái dựa trên trạng thái trước đó:

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