在 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)
或者这是错误的思考方式?
最佳答案
差不多,它看起来像这样:
// 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>;
};
- 打开开发工具
- 触发事件以查看它是否正常工作。
- 转到事件监听器标签。
- 检查所有事件附加到哪个元素。
- 从
#root
元素中删除click
监听器。
关于javascript - React onClick 是否更像一个 JavaScript addEventListener 而不是一个标准的 JavaScript onclick 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66140454/