React onClick 是否更像是 JavaScript addEventListener 而不是标准的 JavaScript onclick 属性？

IT技术 javascript reactjs dom-events
2021-05-16 22:11:44

在 React 中，将 onClick 视为设置 eventListener 而不是标准的 JavaScript onclick 属性会更好吗？

例如，考虑以下两个代码片段，第一个在标准 JavaScript 中，第二个在 React 中：

<button onclick="activateLasers()">
  Activate Lasers
</button>

<button onClick={activateLasers}>
  Activate Lasers
</button>

在上面的示例中，onclick 与对 activateLasers 函数的快速调用相关联。然而，在 React 示例中，onClick 只是与 activateLasers 函数相关联（语法没有明确调用该函数，即使在幕后它确实调用了它）。从这个意义上说，尽管 React 的名字是 onClick，但它更像是这个传统的 JavaScript 代码：

.addEventListener("click", activateLasers)

或者这是错误的思考方式？

1个回答

几乎，它看起来像这样：

// mapEventToComponent implemented by React
document.getElementById("root").addEventListener("click", mapEventToComponent,...);

在 React 中，事件处理程序（如onClick处理程序）是SyntheticEvent实例。

它通过使用事件委托来帮助实现高性能。React 将单个事件侦听器附加到root文档（而不是节点本身），当调用事件时，React 将其映射到组件。

自己检查一下！

const Component = () => {
  return <button onClick={() => console.log("hello")}>Click</button>;
};

编辑合成事件

  1. 打开开发工具
  2. 触发事件以查看它是否有效。
  3. 转到事件侦听器选项卡。
  4. 检查所有事件附加到哪个元素。
  5. click从#root元素中删除侦听器。

在此处输入图片说明

其它你可能感兴趣的问题
上一篇Apollo GraphQl 存储派生数据 下一篇Lodash 去抖动并没有像预期的那样阻止调度 onChange