React中为何无setTimeout(0)时textarea聚焦及光标定位失效？

先聊聊你的场景：你写了个React组件，点击按钮能把div转成textarea，还希望进入编辑状态时光标自动跳到文本末尾。一开始只有点击按钮时功能正常，用快捷键触发编辑就失效，加了setTimeout(() => {}, 0)之后两种场景都正常了。这背后其实和浏览器的事件循环、React的更新机制密切相关。

核心原因：事件循环与同步任务的阻塞 #

浏览器的JavaScript执行是基于事件循环的，同步任务会在当前宏任务队列里依次执行，而setTimeout(0)的作用是把回调函数放到下一个宏任务队列里，等当前所有同步任务都执行完了再运行。

为什么快捷键场景下直接调用会失效？

• 当你用快捷键触发编辑时，快捷键的按键事件处理（比如keydown/keyup）和React的状态更新、DOM渲染（也就是把textarea挂载到页面上）是在同一个宏任务里完成的。
• 你在componentDidMount里直接调用focus()和setSelectionRange()，这时候浏览器可能还在处理快捷键事件的后续逻辑（比如浏览器的默认按键行为，或者其他同步执行的代码），导致你的焦点设置被覆盖，或者光标定位的时机不对——简单说就是，你抢在浏览器还没处理完当前所有事情的时候就去设置光标，结果被浏览器后续的操作给冲掉了。

而点击按钮的场景为什么没问题？

• 按钮的点击事件处理完成后，React才会触发状态更新和DOM渲染，整个流程相对独立，没有其他同步任务干扰你的焦点设置，所以直接调用就能生效。

setTimeout(0)的作用：把操作延后到下一个事件循环 #

当你把focus()和setSelectionRange()放到setTimeout(0)里，相当于告诉浏览器：“等你把当前手里的所有活都干完了，再帮我做这件事”。这时候：

1. 快捷键的所有事件处理、浏览器默认行为都已经执行完毕
2. React已经完全完成了textarea的DOM挂载和渲染
3. 没有其他同步代码会干扰焦点和光标位置的设置
   所以这时候再去设置光标，就能稳稳地定位到文本末尾了。

补充：React异步更新的时序问题 #

虽然componentDidMount是在DOM挂载完成后才会触发，但React的状态更新本身是异步的。在某些场景下（比如快捷键触发的快速状态变化），DOM的实际更新可能和componentDidMount的执行在时序上非常接近，甚至可能存在浏览器还没完全把textarea渲染到页面上的情况（浏览器的渲染线程和JS线程是互斥的，可能还没完成重绘）。setTimeout(0)也能避开这种时序问题，确保操作在DOM完全就绪后执行。

内容的提问来源于stack exchange，提问作者Ryan Peschel