จะเกิดอะไรขึ้นเมื่อใช้ this.setState หลาย ๆ ครั้งใน React component?

Question 1

ฉันต้องการตรวจสอบสิ่งที่เกิดขึ้นเมื่อคุณใช้ 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')
);

ดังที่คุณจะเห็นการแจ้งเตือนที่ระบุว่า "แสดงผล" จะปรากฏขึ้นทุกครั้งที่เรนเดอร์

คุณมีคำอธิบายว่าเหตุใดจึงทำงานได้อย่างถูกต้อง?

Question 2

ตอบสนองการอัพเดตสถานะแบทช์ที่เกิดขึ้นในตัวจัดการเหตุการณ์และเมธอดวงจรชีวิต ดังนั้นหากคุณอัปเดตสถานะหลายครั้งใน<div onClick />ตัวจัดการ React จะรอให้การจัดการเหตุการณ์เสร็จสิ้นก่อนที่จะแสดงผล

เพื่อให้ชัดเจนสิ่งนี้ใช้ได้เฉพาะในตัวจัดการเหตุการณ์สังเคราะห์ที่ควบคุมด้วยปฏิกิริยาและวิธีวงจรชีวิตเท่านั้น การอัปเดตสถานะไม่รวมอยู่ใน AJAX และsetTimeoutตัวจัดการเหตุการณ์เป็นต้น

Question 3

เมธอด 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 (ตัวอัปเดต, [โทรกลับ]) สามารถใช้ฟังก์ชันตัวอัปเดตเป็นอาร์กิวเมนต์แรกเพื่ออัปเดตสถานะตามสถานะและคุณสมบัติก่อนหน้า ค่าที่ส่งคืนของฟังก์ชันตัวอัปเดตจะรวมเข้ากับสถานะส่วนประกอบก่อนหน้าอย่างตื้น ๆ วิธีนี้จะอัปเดตสถานะแบบอะซิงโครนัสดังนั้นจึงมีการเรียกกลับตัวเลือกที่จะถูกเรียกเมื่อสถานะเสร็จสิ้นการอัปเดตอย่างสมบูรณ์

ตัวอย่าง:

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