react组件更新机制

最新推荐文章于 2025-05-11 10:33:20 发布

原创最新推荐文章于 2025-05-11 10:33:20 发布

· 904 阅读

0 ·

版权

文章标签：

#前端 #javascript #vue.js

文章详细阐述了React中setState方法的异步特性，指出连续调用setState可能不会立即更新state。推荐使用回调函数来确保获取正确的state值。同时提到，setState的第二个参数是一个更新完成后的回调，用于在DOM更新后执行操作。组件更新会触发以其为根的子组件树的更新过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、setState

1、setState是异步更新state内容的

如果想要连续更新两次state需要使用回调的形式：

this.setState({
    num:this.state.num+1
})
console.log(state.num) //1
this.setState({
    num:this.state.num+1
}) //两次调用setState因为异步的关系拿到的都是原本的num值：1，所以两次更新都是把num赋值为1+1
console.log(state.num) //1

//推荐----------------------------------------
this.setState((state,props)=>{
    console.log(state.num) //1，原本未更新前是1
    return {
        num:state.num+1
    }
})
this.setState((state,props)=>{
    console.log(state.num) //2，取到的是上次调用setState后的 state值
    return {
        num:state.num+1
    }
})
console.log(state.num) //1,因为这种形式也是异步，所以同步代码打印的内容还是1

2、setState的第二个参数，页面更新完后的回调函数