setTimeout 里仍然异步

Question

老师，我自己写的在 setTimeout 里和 DOM 事件里的 setState，为什么还是异步的呀？这个和React 版本有关系吗
"react": “^18.2.0”,

import React from "react";
class StateDemo extends React.Component {
    constructor(props) {
        super(props);
        // 1. state 要在构造函数中定义
        this.state = {
            count: 0
        }
    }
    render() {
        return (
            <div>
                <p>{this.state.count}</p>
                <button onClick={this.handleClick}>increase</button>
            </div>
        )
    }
    handleClick = () => {
        // 3. 同步或异步
        // 直接调用是异步
        // setTimeout 中 setState 是同步的
        setTimeout(() => {
            this.setState({
                count: this.state.count + 1
            }, () => {
                console.log('cb', this.state.count) // 回调里可以拿到最新值，点一次后是1
            })
            console.log('after',this.state.count) // 但我实际测试，这里还是0
        }, 0)
    }
    componentDidMount() {
         // 原生 DOM 事件中，是同步的
        document.body.addEventListener('click', () => {
            this.setState({
                count: this.state.count + 1
            })
            console.log('count in body event',this.state.count) // 实际测试这里还是0
        })
    }

}
export default StateDemo;

Answer 1

双越 2022-06-29 19:08:05

有关系。

React 18 在这块做了调整，setTimeout 和 DOM 事件中的 setState 也都成了异步的了。

关于这块我正在准备升级内容补充。

• 提问者 要啥要啥自行车 #1

  好的谢谢老师！

• 提问者 要啥要啥自行车 #2

  那可不可以理解为，在 React 18 版本后，setState 就是异步方法，不存在同步的说法了？

• 双越 回复 提问者 要啥要啥自行车 #3

  是的。

Answer 2

qq_艾诺_ 2022-09-09 20:46:11

react18更新了，setState都是异步的了。