setState()的异步更新和第二个参数

我们用setState({})去更新状态时,发现更新后拿到的状态不是最新的,还是更新前的,所以setState是异步更新的,那么怎么拿到更新之后的state再次进行setState呢?

state = {
    count: 1
}
this.setState({
    count: this.state.count + 1

})
this.setState({
    count: this.state.count + 1
})
// 上面这种方式执行两次后count的值仍然是2,因为是异步更新的,界面渲染也只会合并多次setState只执行一次渲染

// 解决方法(也是setState的推荐写法):
this.setState((state, props)=>{
    return {
        count: state.count + 1
    }
})
this.setState((state, props)=>{
    return {
        count: state.count + 1
    }
})
// 使用回调函数的形式进行更新每次拿到的state才是最新的state,但是setState仍然是异步更新的

除此之外我们经常想在状态更新页面完成渲染后立即做一些事情,那么这时我们就要用到setState的第二个参数

this.setState((state, props) => {
    return {
        title: '我是页面标题'
    }
},()=>{
    // 此时状态已更新,页面也完成了更新后的渲染
    document.title = this.state.title;
})
// 这里就实现了更新状态后立马将状态设置成页面的title,第二个参数回调里我们就可以在状态更新后立马做一些事