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