事件传播与 React 冒泡乱序

Posted 2023-03-05

技术标签:

【中文标题】事件传播与 React 冒泡乱序【英文标题】：Event propagation with React bubbling out of order 【发布时间】：2017-12-26 00:58:12 【问题描述】：

鉴于以下代码，我希望在单击数字 3 时打印输出 3, 2, 1。实际打印输出为1, 3, 2。

这是什么原因？

document.body.onclick = () => 
  console.log('1')


function Test() 
  return (
    <div onClick=() => console.log('2')>
      2
      <div onClick=() => console.log('3')>
        3
      </div>
    </div>
  )


ReactDOM.render(<Test/>, document.querySelector("#root"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<body>
1
<div id="root" />
</body>

【问题讨论】：

这很有趣。看起来 React 事件处理在浏览器事件循环之外工作。这可能与 React 使用 SyntheticEvents 有关 【参考方案1】：

任何原生事件处理程序都会在 React 事件处理程序之前触发。

这就是 React 处理事件的方式：

它在顶层监听事件并将它们转换为合成事件将它们放入池中以维持秩序分派到 React 组件

正因为如此，React 生态系统内的秩序得以维持，但相对于其他生态系统而言却是乱序的。

如本视频所述：https://www.youtube.com/watch?v=dRo_egw7tBc

并在文档中模糊描述：https://facebook.github.io/react/docs/events.html#event-pooling

【讨论】：

所以基本上document.body.onclick = e => e.stopPropagation(); 是禁用页面上每个 React-event 的一种非常有效的方法？ React 可能会在调用该函数之前处理该事件。这可以在事件传播的捕获阶段完成。好吧，当我把它放在你的 sn-p 中时，它阻止了他们。我认为 React 对应该在捕获阶段运行的事件处理程序有单独的名称。

以上是关于事件传播与 React 冒泡乱序的主要内容，如果未能解决你的问题，请参考以下文章