React输入框按键触发重渲染后未失焦的原因疑问

哈哈，刚从WPF/WinForms转React确实会有这种“怎么和我想的不一样”的疑惑，我当初刚转的时候也纠结过类似的问题！

你猜的没错，React确实是在“聪明地复用元素”，而不是销毁旧输入框再重建新的——这就要说到React的虚拟DOM和Diffing算法了。

每次你按下按键触发setUserText，组件确实会重渲染，生成新的虚拟DOM树，但React不会直接把整个DOM都换掉。它会把新的虚拟DOM和上一次的虚拟DOM做对比：

• 发现你的<input>元素类型没变（都是text类型的输入框），而且在JSX结构里的位置也没变化（没有被条件渲染之类的逻辑移除再添加），React就会直接复用原来的真实DOM节点，只更新需要变化的属性——在这里就是把value更新成新的userText值。

既然DOM节点根本没被销毁重建，那焦点自然就一直保留在这个输入框上啦，完全不需要“后台恢复焦点”这一步。

反过来举个例子，如果你的输入框是用条件渲染控制的，比如：

{showInput && <input type='text' value={userText} onChange={...}/>}

当showInput从false变true时，React才会重新创建输入框的DOM节点，这时候才会出现焦点丢失的情况——这时候你可能才需要用ref手动恢复焦点。

回到你的代码，因为输入框在每次重渲染的JSX里都稳定存在，React就放心地复用了原来的DOM节点，所以你才会觉得“神奇地保留了焦点”~

备注：内容来源于stack exchange，提问作者jessejbweld