给定以下代码，我希望在单击数字 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>最佳答案
任何 native 事件处理程序都将在 React 事件处理程序之前触发。
这就是 React 处理事件的方式:
- 它在顶层监听事件并将它们转换为综合事件
- 将它们放入池中以维持秩序
- 调度 React 组件
正因为如此，React 生态系统中的秩序得以维持，但相对于其他生态系统而言是乱序的。
如本视频中所述:https://www.youtube.com/watch?v=dRo_egw7tBc
并在文档中含糊地描述:https://facebook.github.io/react/docs/events.html#event-pooling
关于javascript - React 冒泡的事件传播乱序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45212840/