[React 的 onclick 事件函数中:执行语句外面包了一层 setTimeout((...), 0)是啥意思? 谢谢]

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 1449 days ago, the information mentioned may be changed or developed.

const handleUpdate = (item)=>{
setTimeout(()=>{
updateForm.current.setFieldsValue(item)
},0)
}

如上面代码所示
React 的 onclick 事件函数中:执行语句外面包了一层 setTimeout((...), 0)是啥意思? 谢谢

10 replies • 2022-11-21 09:34:35 +08:00

westoy

Nov 20, 2022 via Android

设计 dom 渲染，工程上会出现很多玄学问题。比如你第一行明明插入了一个元素，第二行操作的时候它却有可能还没被生成，所有的这类玄学问题都能通过一个 setTimeout 解决。

westoy

Nov 20, 2022 via Android

涉及。。。

TWorldIsNButThis

Nov 20, 2022

异步执行

Rocketer

Nov 20, 2022 via iPhone

关键词：javascript 事件循环

userdhf

Nov 20, 2022

拿 Promise 包一下更好...

kongkx

Nov 20, 2022 via iPhone

如一楼所说，强行调整执行顺序（ event loop 相关）。至于是否必要，可以说是个玄学问题（太懒了，不想深究）

eason1874

Nov 20, 2022

JS 是单线程，代码排队执行，你想把一段代码放到队伍最后就可以用 setTimeout 0 （看起来是立即执行，其实是等其他事件后立即执行）

比如 1 2 3 三个函数，一般按代码顺序执行，如果你给 2 setTimeout 0 ，那执行顺序就变成 1 3 2

ragnaroks

Nov 20, 2022

这里有两种可能。

1 是代码作者不知道如何正确验证 updateForm.current 一定存在，想借 setTimeout 确保 DOM 已经存在。

2 是代码作者不知道如何（在 react 中是 startTransition ）正确将任务设置为闲置执行

qzhai

Nov 21, 2022

关键字: 微任务、宏任务、Event-Loop

简单来说，有 Promise 这个函数之后，出现了新的执行顺序。

```
setTimeout(_ => console.log(4))

new Promise(resolve => {
resolve()
console.log(1)
}).then(_ => {
console.log(3)
})

console.log(2)

```

上面代码会输出 1 2 3 4 。

then 属于微任务，(这个要结合 Event-Loop 的原理去看为什么异步要先执行微任务 )
setTimeout 这种属于宏任务，

所以一般出现 setTimeout 0 秒，是为了晚执行。

amumu666

Nov 21, 2022

我估计 onclick 事件还有其他 dom 操作。

这代码是想在新增 dom 渲染之后，再进行赋值操作。