React封装自定义HTML元素select联动场景更新失效问题咨询

问题基础信息 #

• 所用组件为内部基于use-custom-element逻辑改造的TypeScript版自定义HTML组件
• 核心异常表现：当且仅当第二个select下拉框被手动修改过时，勾选复选框后第二个select不会和第一个select的值保持同步；若勾选复选框后再修改第一个select的值，第二个select可正常跟随同步
• 已观测现象：将组件状态管理逻辑从useState重构为useReducer后验证发现，正常场景下封装组件更新时会触发后续change事件及对应dispatch调用，但异常场景下首次更新不会触发change事件，表现类似被防抖逻辑阻塞
• 参考实现入口：use-custom-element 原项目地址
• 异常界面参考：

可行排查思路 #

• 排查自定义元素属性反射与内部状态优先级问题
  检查TS改造版本的自定义元素生命周期逻辑，确认observedAttributes监听、attributeChangedCallback触发逻辑是否符合预期，重点验证用户手动操作第二个select后，是否存在组件内部状态优先级高于外部传入props的逻辑，导致复选框触发同步时，外部传入的新值被内部留存的用户操作值拦截，判定为“值无变化”直接跳过更新，不触发change事件。
• 排查事件绑定与转发逻辑异常
  对比手动操作第二个select前后，元素实例上绑定的change/input事件监听器引用、触发链路是否发生变化，重点确认是否存在用户手动触发组件事件后，React侧的事件监听被临时解绑、或被自定义元素内部逻辑拦截吞掉的问题；同时核对TS改造版本是否修改了原版的事件转发逻辑，漏传了程序化触发更新场景下的事件。
• 排查内部隐式拦截逻辑
  逐行走读改造后的组件源码，确认是否存在针对用户操作的状态标记（如isTouched、userManipulated类标记位），验证这类标记在用户手动修改select后是否被置位、且在复选框触发同步的逻辑分支中未被重置，导致标记位生效期间拦截外部程序化赋值的更新与事件触发。
• 逐行对比原版实现与TS改造版的差异
  拉取原版use-custom-element源码逐行比对改造点，重点检查属性赋值、相等性判断、事件派发的逻辑是否被额外修改：比如原版是否在每次接收到新props时都会强制触发元素更新与事件派发，改造版是否新增了多余的值浅比较/深比较逻辑，导致手动修改后内部状态与外部传入值的比对结果异常，错误跳过更新流程。
• 断点全链路追踪更新流程
  在异常复现场景下，给以下关键节点加条件断点，定位流程中断位置：
  • 复选框勾选事件触发后，第一个select的受控状态值是否正确更新
  • 传递给第二个select的受控value props是否正确传递到自定义元素实例
  • 自定义元素实例接收到新value后，是否走到了内部value赋值逻辑
  • value赋值完成后，是否走到了dispatchEvent派发change事件的逻辑分支
• 排查React重渲染的实例复用问题
  检查两个select、复选框所在组件层级的key设置是否正确，是否存在手动操作第二个select后，组件重渲染时复用了错误的DOM元素实例，导致同步赋值操作作用到了未挂载的旧实例上，当前页面展示的实例未收到更新指令，自然不会触发change事件。
• 排查原生元素默认行为导致的双数据源冲突
  确认封装组件是否正确处理了原生select的默认交互行为：用户手动选择选项后，原生select会留存内部value状态，检查是否存在React侧受控状态、原生元素内部value两个数据源不同步的问题，导致外部通过props传入新值时，原生元素判定当前内部value与新值一致，不触发更新与对应change事件。

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