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

Question

在React中，是否将onClick视为设置事件侦听器而不是标准的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)

还是我的想法有误？

- Luke

---

请注意，有HTML的onclick属性和DOM的addEventListener方法以及React的onClick属性。 - Heretic Monkey

Answer 1

几乎，看起来像这样：

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

在React中，事件处理程序（如onClick处理程序）是SyntheticEvent实例。它通过使用事件委托来实现高性能。当一个事件被调用时，React会将单个事件侦听器附加到文档的root（而不是节点本身），然后将其映射到组件。自己检查一下吧！

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

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

- Dennis Vash

---

谢谢！我想我问的更基础一些。就是是否有意义将React的onClick视为在HTML中插入的传统onclick属性。它们看起来几乎相同，但是不同。前者属性接受一个值，该值是对函数的引用。而后者属性接受一个调用函数的值。这对于经验丰富的React开发人员来说可能很明显。但对于新手来说，这种差异是令人困惑的调整。在我看来，React最好将属性onClickFuncRef称为onClick。 - Luke

不确定您期望什么样的答案。 - Dennis Vash

再次感谢您的反馈。我的问题是一个认知问题：把React onClick属性看作标准的html onclick属性是否有意义？根据反馈，答案似乎最好不要这样看。这是因为与React onClick属性相关联的值需要是对函数的引用。相比之下，html onclick属性需要调用函数，就像这个例子中所示：https://jsbin.com/zoxeruy/edit?html,js,console,output。 - Luke

是的，需要是一个引用。 - Dennis Vash