react setState异步变同步

/*
 * @Author: shihaixia
 * @Date: 2022-02-11 15:25:43
 * @Description: 
 */

import React, { Component } from 'react';

export default class Home extends Component {
  constructor(props){
    super(props);
    this.state={
      count:0
    };
  }
  componentDidMount(){
    // 第四种
    // document.getElementsByTagName("button")[0].addEventListener('click',()=>{
    //   this.setState({
    //     count:this.state.count+2
    //   })
    //   console.log("第4种=======》",this.state.count)
    // })
  }
  setCount=()=>{
    // 异步
    // this.setState({
    //   count:this.state.count+1
    // })
    // this.setState({
    //   count:this.state.count+2
    // })
    // 变同步
    // 第一种
    // this.setState(nextState=>{
    //   return {
    //     count:nextState.count+1
    //   }
    // })
    //  this.setState(nextState=>{
    //   return {
    //     count:nextState.count+2
    //   }
    // })
    //console.log("异步============>",this.state.count) //打印出来0，页面为2
    // 方法二
    // setTimeout(() => {
    //    this.setState({
    //   count:this.state.count+1
    // })
    //   this.setState({
    //   count:this.state.count+2
    // })
    // }, 0);
    // console.log("第2种",this.state.count) 

    // 方法三
     this.setState({
        count:this.state.count+2
    },()=>{
       console.log("第3种============》",this.state.count) 
    })
  }

  render() {
    const {count} =this.state;
    return <div>
      <p>{count}</p>
      <button onClick={this.setCount}>点击</button>
    </div>;
  }
}