React——setState 是同步还是异步问题

这篇是为了了解清楚setState的更新机制,有人理解setState方法是异步的,但这个是错误的!!

setState方法是异步的嘛?
js 复制代码
// 从这里我们可以看到,打印出来是1,会以为setState是异步的
this.state = { count: 1 }
this.setState({
	count: this.state.count + 1
})
console.log(this.state.count) // 1

​ 我们试下看,调用setState多次,会执行几次。

js 复制代码
// 这里可以看到最后结果,count只会是2
this.state = { count: 1 }
this.setState({
	count: this.state.count + 1
})
this.setState({
	count: this.state.count + 1
})
this.setState({
	count: this.state.count + 1
})
console.log(this.state.count) // 1

​ 从这里我们可以看出来,我们调用多少次setState,不会依次执行,会把所有对象合并到state,再促发组件更新,只会触发一次重新渲染,减少re-render调用。这是React内部性能优化机制,类似异步效果而已,但它不是异步!

如何解决setState合并执行的问题?(解决多次调用依赖,同步)

上面使用的都是对象去设置state的内容,那如果我们通过updater函数的形式去改变

updater函数:setState((preState) => {}) 语法

updater函数:setState((preState) => {},callback 语法,第二个参数callback是再setState执行完毕(页面渲染完毕)后执行

​ 通过使用updater函数,我们多次调用setState的时候,每次都返回最新的State,解决上面的问题

js 复制代码
this.setState((preState) => {
    return {
    	count: preState.count + 1
    }
})
console.log(this.state.count) // 1
总结:setState是React性能优化机制------同步!!

从前面我们可以看到setState的表现都很像异步,但本身并不是一个异步方法,是同步的!!

​ 如果setState是一个同步执行的机制,那么这个组件会被重新渲染100次,这对性能是一个相当大的消耗。

React框架设计的性能优化机制,在React环境中,setState表现出来是异步的;

在原生事件、setTimeout/setInterval、async/await,setState表现出来是同步的;

setState本身并不是异步,只是因为react的性能优化机制体现为异步。在react的生命周期函数或者作用域下为异步,在原生的环境下为同步。

js 复制代码
// 同步 例子1 原生事件
state = {
    number:1
};
componentDidMount() {
    document.body.addEventListener('click', this.changeVal, false);
}
changeVal = () => {
    this.setState({
      number: 3
    })
    console.log(this.state.number)
}

// 同步 例子2 setTimeout
state = {
    number:1
};
componentDidMount(){
    setTimeout(()=>{
      this.setState({number:3})
      console.log(this.state.number)
    },0)
}
相关推荐
我想说一句几秒前
React待办事项开发记:Hook魔法与组件间的悄悄话
前端·javascript·前端框架
真夜几秒前
CommonJS与ESM
前端·javascript
G等你下课2 分钟前
从点击到执行:如何优雅地控制高频事件触发频率
前端·javascript·面试
Jackson_Mseven3 分钟前
面试官:说说 startTransition 和 useDeferredValue?我:我用它一行代码救了首页!
前端·javascript·面试
架构个驾驾3 分钟前
从0到1搭建Vue3+Vant移动端项目(一)
前端·javascript·vue.js
然我3 分钟前
React 中 useEffect 到底怎么用才不会踩坑?全流程详解 + 实例讲透副作用
前端·javascript·react.js
前端付豪4 分钟前
12、表单系统设计:动态表单 + 校验 + 可配置化
前端·javascript·架构
sophister5 分钟前
你以为的 2025-05-28,其实是另一天:JavaScript 日期解析那些坑与最佳实践
前端·javascript
jackyChan6 分钟前
ES6解构赋值 vs 传统手动赋值:性能真相大揭秘
javascript
国家不保护废物6 分钟前
节流(throttle):给频繁操作加上冷却时间!🔥
前端·javascript·面试