React中setState设计是异步

在React18之前，setState操作是同步的，在React18之后，setState操作是异步的。原因是：为了提高性能。让我们看一下今天要讲的例子：

import React,{Component} from "react";

function Hello(props){
    return <h2>{props.message}</h2>
}

export class App extends Component{
    constructor(props){
        super(props)
        
        this.state = {
            message:"Hello World",
            counter:0
        }
    }
    
    componentDidMount(){
        // 1.网络请求一：banners
        
        // 2.网络请求二：recommends
        
        // 3.网络请求三：productlist
    }
    changeText(){
        this.setState({message:"你好啊，世界"})
        console.log(this.state.message)
    }
    
    increment(){
        console.log("------")
        // 第一块注释
        // this.setState({
        //     counter:this.state.counter + 1
        // })
        // this.setState({
        //     counter:this.state.counter + 1
        // })
        // this.setState({
        //     counter:this.state.counter + 1
        // })
        
        // 第二块注释
        // this.setState((state)=>{
        //     return {
        //         counter:state.counter + 1
        //     }
        // })
        // this.setState((state)=>{
        //     return {
        //         counter:state.counter + 1
        //     }
        // })
        this.setState((state)=>{
            return {
                counter:state.counter + 1
            }
        })
    }
    
    render(){
        const { message,counter } = this.state
        console.log("render被执行")
        
        return (
            <div>
                <h2>message:{message}</h2>
                <button onClick={e=>this.changeText()}>修改文本</button>
                <h2>当前计数:{counter}</h2>
                <button onClick={e=>this.increment()}>counter+1</button>
                
                <Hello message={message}></Hello>
            </div>
        )
    }
} 

export default App;

在上面的例子中，我们在changeText方法中修改了message的值，在increment方法中修改了counter的值。

这里我们分别介绍一下上面的increment中的两个注释。

第一块注释

上面有第一块注释的地方，我们传入的是一个对象，这个对象中包含counter属性，这个属性的值是state.counter + 1。

这里我们可以看到，我们在increment方法中调用了三次setState方法，每次调用setState方法都会将state中的counter值加1。但是点击结果都是只加了1。

这是因为在React18之前，setState是同步的，所以每次调用setState方法都会将state中的counter值加1。但是在React18之后，setState是异步的，所以每次调用setState方法只会将state中的counter值加1，但是不会立即生效，而是会等到所有的setState操作都执行完毕之后，才会将state中的counter值加1。

第二块注释

上面有第二块注释的地方，我们传入的是一个函数，这个函数中返回一个对象，这个对象中包含counter属性，这个属性的值是state.counter + 1。
和第一块注释的区别是，这里我们传入的是一个函数，第一块注释中我们传入的是一个对象。

总结

这里我们可以看到，不论是传入对象还是函数，setState操作都是异步的。所以我们在使用setState时，需要谨慎。最后附上页面的效果截图：

感谢大家观看，我们下次见