useState异步更新的问题

Question

flushSync(() => {
setCount(() => count + 1)
})
flushSync(() => {
setCount(() => count + 1)
})
flushSync(() => {
setCount(() => count + 1)
})
flushSync(() => {
setCount(() => count + 1)
})
老师，这种写法上，我理解 setCount会批量合并，计数会+1， 但是render应该会执行4次才对，但是实际经过测试，render只会渲染2遍；即使增加再多的flushSync也不行。

flushSync(() => {
setCount(count => count + 1)
})
flushSync(() => {
setCount(count => count + 1)
})
flushSync(() => {
setCount(count => count + 1)
})
flushSync(() => {
setCount(count => count + 1)
})
只有这种写法下，才跟你讲解的一致，为什么上面那种写法，不使用上次的值，render最多只渲染2次

Answer 1

weixin_慕瓜1443996 2023-08-24 14:18:44

setCount()如果传进去的是个回调函数的话，必须得把参数作为旧值，传进去

• 河畔一角 #1

  回答正确

Answer 2

河畔一角 2023-08-25 12:26:19

你上面第一种写法不对，要把count当做参数传递进去而不是取最外面的值

• 提问者 weixin_慕莱坞8082592 #1

  const handBtnClick = () => {
      setTimeout(() => {
        setCount(count + 1)
        setCount(count + 1)
        setCount(count + 1)
        setCount(count + 1)
      }, 10)
    }
  
  // 这种写法在react18中会进行合并，渲染一次，符合预期， 但是在react17中，setimeout中应该是同步执行，理论上应该是渲染4次，但是实际只渲染了2次， 传入函数时才会渲染4次，具体原因是什么

• 河畔一角 回复 提问者 weixin_慕莱坞8082592 #2

  没具体研究过17，回答不了。

Answer 3

qq_慕尼黑6518176 2023-08-24 08:01:56

你上面那种写法，count 只会➕1 render两次