HTML事件处理程序与React事件处理程序

我想问一个有关在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的应用程序的不同之处。

相关文章