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

【问题标题】：HTML event handler vs React event handlerHTML 事件处理程序与 React 事件处理程序
【发布时间】：2018-01-25 14:19:03
【问题描述】：

我想问一个关于在 HTML 和 React 中使用事件处理程序的问题。

在 Jon Duckett 写的 Javascript and Jquery 一书中，作者提到使用 HTML 事件处理程序属性被认为是不好的做法例如以下内容：

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

但最近我开始学习 React，当定义一个组件时，有很多事件处理程序用作属性的示例，这样做似乎很常见，这样做并没有受到批评，

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

这是有原因的吗？是因为这是在 React 中绑定事件处理程序的唯一方法吗？从我的角度来看，React 本质上是通过 HTML 构建组件元素，但使用事件处理程序属性为其分配事件，那么为什么 React 会带回一个被认为是不好的做法的概念呢？

【问题讨论】：

【解决方案1】：

在之前的 Javascript 时代，这被认为是不好的做法，因为我们希望尽可能地将 HTML 和 JS 分开，以便更好地管理代码。您无法在包含另一组 button 的 HTML 页面中快速导航到您的 onClick。

在 React 中，您可以通过组件树来管理您的应用程序代码。我认为 React 的强大之处在于：

回到您的简单示例，onClick 处理程序将在您的组件内轻松管理。也许还有其他一些处理程序，但在 1 个组件的范围内仍然很方便。取决于您的组件层次结构的哪个级别，您想要做的一切都在同一个页面、同一个类、同一个函数上。

【讨论】：

【解决方案2】：

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

HTML 描述文档的内容和结构，CSS 描述外观，JavaScript 描述逻辑或行为。这些东西应该分开存放。 HTML 和 JavaScript 代码不应混用。你的例子是：

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

然而，这不适用于 React：我们没有一个 HTML 文件。相反，我们有模块化的组件，它们有自己的结构、风格和行为。

在 React 中，我们不想要表示和逻辑的分离，而是自包含的组件。这就是它与仅使用“Vanilla JavaScript”/DOM API 的应用程序不同的地方。

【讨论】：