React JS中服务端渲染文本字段如何正确触发onFocus事件

问题背景 #

React开发过程中，部分由服务端渲染输出的文本字段组件，会出现已绑定的onFocus事件处理器不触发的异常。经排查，根因是这类组件在客户端完成水合（hydration）流程前，用户就已经提前对组件执行了聚焦操作；而React的合成事件依赖水合流程完成后才会挂载到根DOM节点，因此这类水合前的交互无法被绑定的onFocus逻辑捕获。

可落地的处理方案 #

• 水合完成状态标记+操作补触发
  通过React的客户端侧执行特性，在组件挂载水合完成后（也就是useEffect回调执行时）设置组件级别的水合完成标识：初始状态为未水合，标识值为false，effect执行后将标识置为true。在未水合阶段如果捕捉到目标文本字段的聚焦行为，先将该次聚焦操作的上下文信息（触发元素、相关业务参数、触发时间点）临时存储，等组件水合完成后，直接调用预先绑定的onFocus回调执行对应业务逻辑，不需要对DOM做强制焦点调整。
• 原生捕获阶段事件代理，覆盖水合前的交互窗口
  因为React合成事件的挂载时机依赖水合完成，无法覆盖水合阶段的交互间隙，可以在客户端应用初始化时，在文档根节点绑定捕获阶段的原生focus事件监听——注意focus事件本身不支持冒泡，必须在捕获阶段才能接收到全文档的聚焦事件通知，对应的监听写法为document.addEventListener('focus', handler, true)。监听逻辑里可以判断目标文本字段是否完成水合，如果处于未水合状态，就把对应的聚焦操作加入待执行队列，等对应组件水合完成后，取出队列里的操作直接执行绑定的onFocus回调。
• 状态对齐避免逻辑冲突
  补触发onFocus逻辑时，要同步更新组件内部维护的聚焦状态值，保证水合完成后组件的内部状态和用户实际的交互状态完全一致，避免出现水合完成后因状态不匹配，重复触发聚焦、失焦的循环逻辑。

常见避坑点 #

• 不要通过全局设置pointer-events: none的方式拦截水合阶段的用户点击，这种方式会直接打断用户的连续操作，在首屏加载耗时较长的场景下，会造成多次点击无反馈的糟糕体验。
• 不要在水合完成后，对水合前的聚焦元素主动调用element.focus()方法强制重新触发聚焦，这种操作会打断用户已经开始在输入框内录入的内容，在移动端还可能造成键盘反复唤起、光标位置跳动的体验问题。
• 待执行的聚焦事件队列要做好去重逻辑，避免同一个元素的同一次聚焦操作，被重复执行多次onFocus回调造成业务逻辑异常。

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