React中setState详细使用

React中setState详细使用

基本使用

首先我们看下面代码，开始今天的setState之旅。

import React,{Component} from "react";
import {flushSync} from "react-dom";

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
        
    }
    
    increment(){
        let counter_val = 0;
        counter_val = this.state.counter+1;
        console.log(counter_val)
        this.setState({counter:counter_val})
    }
    
    changeText(){
        setTimeout(()=>{
            // 在React18之前，setTimeout中setState操作，是同步操作
            // 在React18之后，setTimeout中setState异步操作（批处理）
            flushSync(()=>{
                this.setState({message:"你好啊，世界"})
            })
            console.log(this.state.message);
        },0);
    }

    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;

上面代码中，我们可以看到，setState的使用方式。在React18之前，setState操作是同步的，在React18之后，setState操作是异步的。现在我们大部分使用的都是React18版本，所以我们需要了解一下setState的异步操作。就是说在使用setState时，我们需要在网络请求的回调函数中获取最新的状态值。我们这里就使用的是一个定时器setTimeout来模拟网络请求。

这里我们来分析一下为什么说setState操作为异步有利于提升性能。上面changeText方法中flushSync函数是用来同步setState操作的。我们在setTimeout中使用flushSync函数来同步setState操作。

假如我们使用setTimeout而没有使用flushSync函数，那么在执行完this.setState({message:"你好啊，世界"})之后，并不会立即更新状态值，而是在下一个事件循环中才会更新。也就是说，我们在console.log(this.state.message)打印出来的值是Hello World，而不是你好啊，世界。这是因为setState操作是异步的，也就是说在执行完this.setState({message:"你好啊，世界"})之后，并不会立即更新状态值，而是在下一个事件循环中才会更新。也就是我们再次点击修改文本按钮，才会更新状态值（控制台才会输出你好啊，世界）。

当我们使用flushSync函数时，就会立即更新状态值，也就是说在执行完this.setState({message:"你好啊，世界"})之后，会立即更新状态值(在控制台才会输出你好啊，世界)，而不是在下一个事件循环中才会更新。

最后我们附上浏览器上的效果图：

感谢大家的支持！

更多内容: React中setState的三种写法
React中setState设计是异步