React中的setState到底發生了什么？

https://yq.aliyun.com/ziliao/301671

https://segmentfault.com/a/1190000014498196

https://blog.csdn.net/u011272795/article/details/80882567

import React, { Component } from 'react';

export default class SeeState extends Component {
  constructor() {
    super();
      this.state = { val: 0 };
  }
  componentDidMount() {
    // 在同一個方法中多次setState是會被合並的，並且對相同屬性的設置只保留最后一次的設置；
    // 定時器中的setState，每次都會引起新的render，即使是同一個定時器中的多次setState
    // render輸出3
      this.setState({val: this.state.val + 1});
      console.log(this.state.val); // 第 1 次 log 0
      this.setState({val: this.state.val + 1});
      console.log(this.state.val); // 第 2 次 log 0
      setTimeout(() => {
          this.setState({val: this.state.val + 1});
          console.log(this.state.val); // 第 3 次 log 2
          this.setState({val: this.state.val + 1});
          console.log(this.state.val); // 第 4 次 log 3
      }, 0);

    // setState不會立刻改變React組件中state的值；而是存一個快照
    // render輸出2
    // this.setState(prevState=>({
    //   val: prevState.val+1
    // }))
    // console.log(this.state.val); // 第 1 次 log 0
    // this.setState(prevState=>({
    //   val: prevState.val+1
    // }))
    // console.log(this.state.val); // 第 2 次 log 0
  }
  render() {
    const {val} = this.state
    return (
      <div>{val}</div>
    );
  }
}