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

Question

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

例如，考虑这两个代码 sn-ps，第一个在标准 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)

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

Answer 1

差不多是这样的：

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

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

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

自己检查！

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

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