老师下面这段的逻辑不明白，老师能不能画一个数据流的图给讲解一下呢?

          onClick={()=>{
            this.setState({ count: this.state.count + 1 }, () => { console.log("s",this.state.count); });
             this.setState({ count: this.state.count + 1 }, () => { console.log("d",this.state.count); });
            // Output：
            // w 0
            // s 1
            // d 1
            // w 1
            // s 2
            // d 2
           
            console.log("w",this.state.count);
          }}

老师上面那段就是外层的log输出语句和两个个setState是异步的，三个语句同时出发，外层的输出语句执行完、新的state设置完之后再执行callback回调函数，这样理解对吧

下面这段的逻辑不明白，老师能不能像上面一个画一个数据流的图给讲解一下呢?

          onClick={()=>{
            setState 的第一个参数可以是对象，也可以是函数，函数的第一、二个参数分别是上一个生命周期的的state和props
            this.setState((preState,preProps)=> {return{ count: preState.count + 1 }}, () => { console.log("s",this.state.count); });
            this.setState((preState, preProps) => { return { count: preState.count + 1 }}, () => { console.log("d",this.state.count); });
            // Output：
            // w 0
            // s 2
            // d 2
            // w 2
            // s 4
            // d 4



            // 这一句比上面setState的回调函数里面的内容先执行，因为这一句跟setState同时执行（setState本身异步操作），setState处理完state之后回调函数才执行
            console.log("w",this.state.count);
          }}

上一个state的count是0，外层的log语句输出0，两个setState也是同时执行，为什么最后回调函数出来的都是2？