setState是同步的还是异步的？

1.react17版本

import React, { Component } from 'react';

class SetState extends Component {
    state = {
        num: 0
    }
    handleClick = () => {
        this.setState({
            num: this.state.num + 1
        });
        console.log('handleClick setTimeout1', this.state.num)

        this.setState({
            num: this.state.num + 1
        });
        console.log('handleClick setTimeout2', this.state.num)

        this.setState({
            num: this.state.num + 1
        });
        console.log('handleClick setTimeout3', this.state.num)
        // setTimeout(() => {
        //     this.setState({
        //         num: this.state.num + 1
        //     });
        //     console.log('handleClick setTimeout1', this.state.num)

        //     this.setState({
        //         num: this.state.num + 1
        //     });
        //     console.log('handleClick setTimeout2', this.state.num)

        //     this.setState({
        //         num: this.state.num + 1
        //     });
        //     console.log('handleClick setTimeout3', this.state.num)
        // },3000)
        console.log('handleClick', this.state.num)
    }
    render() {
        console.log('render', this.state.num)
        return (
            <>
                <p>{this.state.num}</p>
                <button onClick={this.handleClick}>+</button>
            </>
        );
    }
}

export default SetState;
前提： 
      我们在页面创建一个BUTTON按钮，当点击该按钮，观察num的变化
      在react17版本中是通过ReactDOM.render函数创建DOM 的，也就是Legacy的模式。
     当Legacy模式命中了batchedUpdates,则此时是异步的；
     当 Legacy模式未命中batchedUpdates，则此时是同步的，比如在setTimeout中运行setState则此时就能获取当前的num
    在react18版本中是通过ReactDOM.createRoot函数创建DOM 的，也就是concurrent的模式。
     在该模式下都是执行的是异步的**
     在react18之后 react推出了一个新特性 将setTimeout这种异步操作也变成批处理了，不在进行同步更新了
     useEffect(fn,[])和componentDidMount的区别：
     useEffect(fn,[])是commit阶段完成后的异步调用
     componentDidMount commit阶段完成视图更新(mutation阶段)后在layout阶段同步调用
     注：学习使用，如有错误，欢迎指出！！！