React中父元素事件与key重渲染导致子Tile组件点击失效问题

核心问题根因 #

• 你观察到的“注释掉this.reBuildMatrix = !this.reBuildMatrix时事件完全正常，启用后Tile的onClick彻底失效”的现象，本质是两个React运行机制错位共同导致的：
  1. 无效的事件阻断写法带来的逻辑混乱：不少开发者会误以为给DOM标签加stopPropagation属性就能自动阻断事件冒泡，但这个写法在React里是完全不生效的——React的合成事件系统中，只有在事件回调函数内部手动执行e.stopPropagation()才能完成冒泡阻断，把stopPropagation当普通属性写在标签上，既不会起到阻断作用，还会因为无效属性的存在打乱React对DOM属性的更新逻辑。
  2. DOM全量重建与鼠标交互的时序冲突：你把表格元素的key绑定到reBuildMatrix的布尔切换值上时，每次key变化，React会直接销毁整棵旧DOM树、挂载全新的DOM节点。如果用户的鼠标交互（从mousedown触发开始，经过mouseup，到最终判定click事件）的完整流程，恰好跨在新旧DOM树的切换间隙——也就是mousedown和mouseup分别发生在旧节点销毁、新节点挂载的两个不同生命周期节点上，浏览器会判定这次点击交互的生命周期不完整，不会对新挂载的Tile节点触发正常的click事件。

可落地的解决步骤 #

• 修正无效的事件绑定写法：删掉外层容器标签上误加的stopPropagation属性，如果确实需要阻断外层和内层的事件冒泡冲突，要把阻断逻辑写到对应的鼠标事件回调中，比如onMouseDown={(e) => e.stopPropagation()}。
• 调整key的使用逻辑：key的设计初衷是给DOM元素做身份标识，帮助React在重渲染时做最小化的DOM复用，不是用来强制触发全量重渲染的开关。如果需要更新矩阵内容，只需要将矩阵数据存入状态、正常触发组件重渲染即可，不需要通过切换key强制销毁重建整个DOM树，从根源上避免DOM重建和鼠标交互的时序冲突。
• 校验重渲染后的props传递逻辑：在Tile组件的渲染逻辑中增加打印日志，确认重渲染通过props传入的onClick回调不是undefined、没有因为闭包问题拿到失效的旧引用，排除因为props传递异常导致的事件绑定失效问题。
• 快速验证方案：如果暂时不想改动现有key的逻辑，可以将this.reBuildMatrix = !this.reBuildMatrix的状态更新逻辑放到宏任务中延迟执行（比如用setTimeout包裹状态更新），让DOM重建的时机落在用户当前鼠标交互完全结束之后，此时观察Tile的onClick是否恢复正常，即可验证时序冲突的判断是否准确。

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