V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Angela2022
V2EX  ›  程序员

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

  •  
  •   Angela2022 · 2022-11-20 03:16:09 +08:00 · 2607 次点击
    这是一个创建于 720 天前的主题,其中的信息可能已经有所发展或是发生改变。
    const handleUpdate = (item)=>{
    setTimeout(()=>{
    updateForm.current.setFieldsValue(item)
    },0)
    }

    如上面代码所示
    React 的 onclick 事件函数中:执行语句外面包了一层 setTimeout((...), 0)是啥意思? 谢谢
    10 条回复    2022-11-21 09:34:35 +08:00
    westoy
        1
    westoy  
       2022-11-20 03:31:35 +08:00 via Android
    设计 dom 渲染,工程上会出现很多玄学问题。比如你第一行明明插入了一个元素,第二行操作的时候它却有可能还没被生成,所有的这类玄学问题都能通过一个 setTimeout 解决。
    westoy
        2
    westoy  
       2022-11-20 03:32:44 +08:00 via Android
    涉及。。。
    TWorldIsNButThis
        3
    TWorldIsNButThis  
       2022-11-20 03:54:57 +08:00
    异步执行
    Rocketer
        4
    Rocketer  
       2022-11-20 04:05:39 +08:00 via iPhone   ❤️ 1
    关键词:javascript 事件循环
    userdhf
        5
    userdhf  
       2022-11-20 04:18:29 +08:00
    拿 Promise 包一下更好...
    kongkx
        6
    kongkx  
       2022-11-20 09:55:44 +08:00 via iPhone
    如一楼所说,强行调整执行顺序 ( event loop 相关)。至于是否必要,可以说是个玄学问题(太懒了,不想深究)
    eason1874
        7
    eason1874  
       2022-11-20 12:16:23 +08:00   ❤️ 1
    JS 是单线程,代码排队执行,你想把一段代码放到队伍最后就可以用 setTimeout 0 (看起来是立即执行,其实是等其他事件后立即执行)

    比如 1 2 3 三个函数,一般按代码顺序执行,如果你给 2 setTimeout 0 ,那执行顺序就变成 1 3 2
    ragnaroks
        8
    ragnaroks  
       2022-11-20 18:06:32 +08:00
    这里有两种可能。

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

    2 是代码作者不知道如何(在 react 中是 startTransition )正确将任务设置为闲置执行
    qzhai
        9
    qzhai  
       2022-11-21 09:20:20 +08:00
    关键字: 微任务、宏任务、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
        10
    amumu666  
       2022-11-21 09:34:35 +08:00
    我估计 onclick 事件还有其他 dom 操作。

    这代码是想在新增 dom 渲染之后,再进行赋值操作。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   935 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 21:54 · PVG 05:54 · LAX 13:54 · JFK 16:54
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.