React class里setTimeOut里setState不会批量更新

最新推荐文章于 2024-04-09 16:59:47 发布

原创最新推荐文章于 2024-04-09 16:59:47 发布 · 1.4k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react #js

前端JS 专栏收录该内容

24 篇文章

订阅专栏

本文解析React setState的异步特性，探讨如何在setTimeout中确保正确渲染，并介绍三种获取setState后state值的方法：回调、prevState和setTimeout。

先看下这段代码：

import React from 'react'

export default class HK extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            val: 0
        }
    }

    componentDidMount(){
        this.setState({val:this.state.val + 1})
        console.log('HK------------->1', this.state.val)
        this.setState({val:this.state.val + 1})
        console.log('HK------------->2', this.state.val)

        setTimeout(() => {
            this.setState({val:this.state.val + 1})
            console.log('HK------------->3', this.state.val)
            this.setState({val:this.state.val + 1})
            console.log('HK------------->4', this.state.val)
        }, 0)
    }

    render(){
        return null
    }
}

输出结果为：
在这里插入图片描述
我们知道react的setState为异步方法，为了更好的性能，会批量更新state,避免了频繁渲染，提高了性能,但是，setTimeout是异步方法，react无法直到开发者异步方法中想要渲染的顺序，所以在异步方法中调用setTimeout，react会即时渲染，不会使用批量更新。

react 在setState后立即获取state值的方法:
1.setState后使用回调获取

state = {
val:0
}

this.setState({
        val:this.state.val + 1
    },()=>{
        console.log(this.state.val) // 1
    })

2.使用prevState获取，setState() 可以接收一个函数，这个函数接受两个参数，第一个参数表示上一个状态值，第二参数表示当前的 props

this.setState((prevState, props) => ({
    //do something here
}));

this.setState((prevState, props) => ({
        val: prevState.val + 5  
 }))
console.log(this.state.val) // 1

3.使用上诉setTimeout获取