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

Question

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

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

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>;
};

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

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

Is React onClick more like a JavaScript addEventListener than like a standard JavaScript onclick attribute?

javascript

dom-events

reactjs