react 中state在不同场景中不一样的地方

class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    a: 0,
                    b: 0,
                    c: 0
                }
            }

            handClick = () => {
                // 1 在合成事件中  可以直接修改 state   但是不会触发render  不推荐
                // this.state.a = 1
                // console.log(this.state.a);
                // 2 使用setState的时候  可以触发render  并且是异步操作
                // this.setState({ a: 2 })
                // console.log(this.state.a);
                // console.log(this.state.b);
                // console.log(this.state.c);

                // 4 当批量执行 setState的时候  render只 执行一次
                // 也是异步操作 react内部将其合并到一起执行了
                // this.setState({ a: 2 })
                // this.setState({ b: 2 })
                // this.setState({ c: 2 })
                // console.log(this.state);

                // 5 累加  忽略掉后面的 直接执行第一个  
                // this.setState({ a: 1 })
                // this.setState({ a: this.state.a + 1 })
                // this.setState({ a: this.state.a + 1 })
                // console.log(this.state.a);

                // 6 回调函数形式  可以完成5操作
                // this.setState((preState, props) => {
                //     // console.log(preState, props);
                //     return { a: preState.a + 1}
                // })

                // this.setState((preState, props) => {
                //     // console.log(preState, props);
                //     return { a: preState.a + 1}
                // })

                // 7  
                // setTimeout(() => {
                //     // 1) 定时器中 是同步的
                //     this.setState({ a: 1 })
                //     console.log(this.state.a);
                // }, 1000)

                // setTimeout(() => {
                //     // 2) 在定时器中 不合并执行 render不批量更新
                //     this.setState({ a: 1 })
                //     this.setState({ a: 2 })
                //     this.setState({ a: 3 })
                //     console.log(this.state.a);
                // }, 1000)

                // setTimeout(() => {
                //     // 3)  产生了状态依赖
                //     this.setState({ a: 1 })
                //     console.log(this.state.a);
                //     this.setState({ a: this.state.a + 1 })
                //     console.log(this.state.a);
                //     this.setState({ a: this.state.a + 1 })
                //     console.log(this.state.a);
                // }, 1000)

            }

            handClick2 = () => {
                // 1) 原生事件中 是同步的
                //  this.setState({ a: 1 })
                // console.log(this.state.a);
                // 2) 不合并执行
                // this.setState({ a: 2 })
                // this.setState({ b: 2 })
                // this.setState({ c: 2 })
                // console.log(this.state);
                // 3) 有状态依赖
                this.setState({ a: 1 })
                console.log(this.state.a);
                this.setState({ a: this.state.a + 1 })
                console.log(this.state.a);
                this.setState({ a: this.state.a + 1 })
                console.log(this.state.a);
            }

            componentDidMount() {
                // 3 在生命周期函数中 setState也是异步的
                // this.setState({a:1})
                // console.log("componentDidMount",this.state.a);

                document.getElementById("test").addEventListener("click", this.handClick2)
            }

            render() {
                console.log("render", this.state);
                return (
                    <div>
                        <h1>{this.state.a}</h1>
                        <h1>{this.state.b}</h1>
                        <h1>{this.state.c}</h1>
                        <button onClick={this.handClick}>更改state</button>
                        <button id="test">按钮2</button>
                    </div>
                )
            }
        }

        ReactDOM.render(<App />, document.querySelector("#app"))