React 18中微任务内调用setState导致输入框光标跳转问题

核心原因：浏览器行为与React更新时机的冲突 #

1. 浏览器的光标位置规则 #

浏览器对输入框光标位置的处理，会严格区分用户交互触发的修改和程序异步触发的修改：

• 用户输入/删除字符时，浏览器会在同步事件流中完成内容更新，并自动记录光标位置，确保光标停留在操作后的正确位置。
• 如果是在微任务/宏任务中异步修改输入框value，哪怕新值和当前DOM值完全一致，浏览器也会默认将光标重置到输入框末尾——这是浏览器为了区分用户主动操作和程序自动操作的设计逻辑。

2. React受控组件的常规处理 #

在onChange中直接调用setValue时，流程是：

1. 用户输入，浏览器同步更新输入框内容并设置光标。
2. React的onChange触发，调用setValue后，React将状态更新调度到当前微任务队列。
3. 微任务阶段执行React更新：
   • React比较新状态值与输入框当前DOM值，发现两者一致，跳过DOM修改操作，光标位置保持不变。
   • 若值不一致，React会先保存当前光标位置，修改value后再恢复光标，避免跳转。

3. 异步包裹后的问题 #

当用queueMicrotask包裹setValue时，原有流程被打乱：

1. 用户输入后，浏览器同步完成内容和光标设置。
2. onChange中仅将setValue的调用加入当前微任务队列末尾，此时React尚未调度更新。
3. 微任务阶段先执行queueMicrotask回调，触发setValue后，React才调度自己的更新微任务。
4. 当React执行更新时，浏览器已经完成了用户输入相关的内部状态清理，此时即使设置的value与DOM值一致，浏览器仍会触发光标重置到末尾。
5. 同时，由于更新时机延后，React无法正确捕获用户输入后的原始光标位置，导致无法恢复光标。

内容的提问来源于stack exchange，提问作者D-Y