个人中心
gpt4 book ai didi

reactjs - React什么时候创建SyntheticEvents？

转载 作者：行者123 更新时间：2023-12-03 13:20:42 25 4
gpt4 key购买 nike

现在，这就是我理解 React 中事件处理的方式:

  1. 发生 native 事件捕获阶段
  2. 原生事件达到目标
  3. 原生事件再次冒泡
  4. React 在 document 层捕获它
  5. React 将其放入其 EventPluginHub
  6. React 模拟 SyntheticEvent 的另一个完整捕获/气泡往返
  7. React 运行您在代码中构建的处理程序

如果我对 React 内部结构的理解是正确的，并考虑到 this part HTML 规范:

Event objects are dispatched to an event target. But before dispatch can begin, the event object’s propagation path must first be determined.

React 是否会等到事件冒泡到 document 才创建其 SyntheticEvent？如果是这样，为什么？在事件生命周期的第一步，有关其传播路径的所有信息都是已知的，因此他们可以在那里执行此操作。

最佳答案

原因之一是性能。 React 不是将事件监听器附加到应用程序内使用的每个事件，而是将每个事件类型的单个事件监听器附加到 document 。然后，当您创建一个，例如 onClick事件 div ，它只是将其添加到其内部事件监听器映射中。一旦点击 div，React 文档节点上的监听器就会找到您的事件监听器并使用 SyntheticEvent 调用它。

这样，React 就不必一直从 DOM 中重新创建和清除监听器，它只是更改其内部监听器注册表。

另一个原因是，在某些情况下，React 的事件冒泡的工作方式与 DOM 不同。 Portals特别是。

以此为例:

const MyComponent = () => (
  <div onClick={() => console.log('I was clicked!')}>
    MyComponent
    <SomeModalThatUsesPortalComponent>A modal</SomeModalThatUsesPortalComponent>
  </div>
);

const SomeModalThatUsesPortalComponent = () => {
  return ReactDOM.createPortal(
    <div onClick={() => console.log('Modal clicked!')}>this.props.children</div>,
    document.getElementById('myModalsPortal')
  );
}

这最终会得到以下 DOM:

<body>
  <div>
    My Component
  </div>
  <div id="myModalsPortal">
    <div>A modal</div>
  </div>
</body>

因此，在这种情况下，当使用 Portal 时，DOM 结构与组件结构并不完全匹配。这是冒泡行为的不同之处:

  • 点击A modal将不会触发 MyComponent's 上的 native 点击事件div
  • 它将触发 React 的 onClick处理程序 MyComponent's div，因为 modal 是 MyComponent 的子组件

关于reactjs - React什么时候创建SyntheticEvents？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52444941/

25 4 0
文章推荐： multithreading - 编写一个 bash 脚本来重启一个守护进程
文章推荐： r - 带有 NA、TRUE 和 FALSE 的逻辑运算符(AND、OR)
文章推荐： c# - 绑定(bind)到 UI 的调度程序和集合
文章推荐： ruby-on-rails - 如何使用 unicorn 和配置文件在生产模式下启动 Rails 服务器？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com