React重渲染后哪些组件需设置key属性以维持输入焦点？

核心根因 #

所有输入框重渲染后失焦的本质都是对应组件在重渲染流程中被销毁后重建，输入框对应的DOM节点被替换，自然失去焦点。

分场景解决方案 #

「Other」模块TextEditor每次首字符输入后失焦 #

排查以下两点即可解决：

• 检查TextEditor组件的定义位置：不要把TextEditor的函数/类定义写在其他组件的内部作用域，父组件每次重渲染都会生成全新的TextEditor构造函数，React会判定为不同组件直接卸载重建。把TextEditor的定义移到所有组件外层的顶层作用域即可。
• 检查TextEditor外层所有父元素的key属性：不要用随机值、时间戳、每次渲染动态生成的唯一值作为key，key变化会直接触发对应DOM树的销毁重建，替换为固定不变的唯一标识即可。

「Resources」模块资源数量大于1时TextEditor失焦 #

这个问题的触发原因非常明确：你遍历渲染多个TextEditor时用了数组下标作为key。
单条资源时下标永远是0，key固定不变所以组件不会重建，可以正常输入；资源数量大于1后，你新增/修改/调整资源顺序时，下标对应的组件实例会发生变化，React会重建对应位置的TextEditor导致失焦。
解决方案：把遍历的key替换为每个资源项自带的固定唯一ID，不要用数组下标。

通用排查补充 #

如果你用了React.memo、useMemo包裹TextEditor组件，检查对应依赖项是否存在不必要的状态引用，避免每次状态更新都生成新的组件实例。

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