事件传播与 React 冒泡不有序

给定以下代码，我希望在单击数字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 处理事件的方式：

它侦听顶级事件并将其转换为综合事件
将它们放入池中以维持秩序
对 React 组件的调度

正因为如此，在 React 生态系统中保持秩序，但相对于其他生态系统来说是无序的。

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

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

相关内容

最新更新

热门标签：