为何React组件中readOnly值为1时仅UI不更新？

核心原因 #

这是React渲染调度机制与全局变量更新时机的冲突导致的，具体拆解如下：

1. 执行流程梳理 #

• 初始渲染：全局变量value为0，useReadOnly返回0，UI显示0，同时设置第一个1000ms的定时器。
• 第一个定时器触发：
  • 调用setCount标记组件需要更新，但React不会立即渲染（遵循异步调度规则）。
  • 同步执行value +=1，value变为1。
  • 清除已执行的定时器，设置新的1000ms定时器。
• React调度渲染：
  • 组件重新执行，useReadOnly返回当前value（即1），控制台打印readOnly 1。
  • 但在此渲染过程中，我们又清除了刚设置的新定时器，重新创建了一个定时器。
• 渲染被丢弃：
  • React的并发调度机制会判断：当前渲染还未提交到DOM，而新的定时器已经安排了后续更新，因此会放弃这次渲染的结果，不更新UI。
• 第二个定时器触发：
  • value变为2，setCount再次触发更新，这次React完成渲染并提交DOM，UI显示2，后续的更新也能正常同步UI。

2. 关键诱因 #

全局变量value并非React状态，React无法追踪它的变化，只能在每次渲染时读取它的当前值。如果value是用useState管理的状态，就不会出现这种UI与控制台输出不一致的情况——因为React会保证状态更新与渲染的同步性。

内容的提问来源于stack exchange，提问作者Agus Putra Dana