HTML事件处理程序与React事件处理程序 [英] HTML event handler vs React event handler

问题描述

我想问一个有关在HTML中使用事件处理程序并做出反应的问题。

在Jon Duckett撰写的《Javascript and jQuery》一书中，作者提到使用HTML事件处理程序属性被认为是不好的做法 例如，如下所示：

<button onClick="hide()">click me</button>

但最近我开始学习Reaction，在定义组件时，有许多事件处理程序用作属性的示例，这样做似乎很常见，但没有因为这样做而受到批评，

<button onClick={doSomething}>
  xxxyyyzzz
</button>

这是有原因的吗？这是因为这是在Reaction中绑定事件处理程序的唯一方法吗？从我看来，它的反应本质上是通过HTML构建Component元素，但使用事件处理程序属性为其分配事件， 那么，为什么Reaction要重新提出一个被认为是不良做法的概念呢？

推荐答案

为什么内联事件侦听器是不良做法？

HTML描述文档的内容和结构，CSS描述外观，JavaScript描述逻辑或行为。这些东西应该分开保管。HTML和JavaScript代码不应该混合在一起。您的示例是：

<button onClick="hide()">click me</button>

但是，这不适用于Reaction：我们没有一个HTML文件。相反，我们有模块化的组件，它们有自己的结构、样式和行为。

在Reaction中，我们不希望分离表示和逻辑，而需要独立的组件。这就是它与仅使用"Vanilla JavaScript"/DOMAPI的应用程序的不同之处。

这篇关于HTML事件处理程序与React事件处理程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！