事件传播与 React 冒泡乱序答案

【问题标题】：Event propagation with React bubbling out of order事件传播与 React 冒泡乱序
【发布时间】：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 有关

标签： javascript html reactjs dom dom-events

【解决方案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 对应该在捕获阶段运行的事件处理程序有单独的名称。