javascript - 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 .

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

自己检查一下!

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

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