Question

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

这是什么原因？

＆＃13;

1, 3, 2

＆＃13;

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"))

＆＃13;

Answer 1

任何本机事件处理程序都将在React事件处理程序之前触发。

这就是React如何处理事件：

它会侦听顶层的事件并将其转换为合成事件
将它们放入池中以维持秩序
派遣到React组件

因此，订单在React生态系统内维持，但与其他生态系统无关。

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

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

事件传播与React冒泡无序

1 个答案: