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

Question

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

在Jon Duckett所写的《JavaScript和jQuery》一书中，作者提到使用HTML事件处理程序属性被认为是不良做法，例如以下内容：

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

但最近我开始学习React，当一个组件被定义时，有很多例子将事件处理程序用作属性，并且这似乎是常见的做法，不会因为这样做而受到批评，

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

这是有原因的吗？是因为这是在React中绑定事件处理程序的唯一方式吗？从我看来，React基本上是通过HTML构建组件元素，但使用事件处理程序属性将事件分配给它，那么为什么React会重新引入被认为是不良实践的概念呢？

- securenova

Answer 1

为什么内联事件监听器是不好的实践？

HTML 描述文档的内容和结构，CSS 描述外观，JavaScript 则关注逻辑或行为。这些东西应该分开处理。HTML 和 JavaScript 代码不应混合在一起。你举的例子是：

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

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

在React中，我们不希望将呈现和逻辑分离，而是使用独立的组件。这就是它与仅使用“纯JavaScript”/ DOM API 的应用程序不同之处。

- PeterMader

---

另一个重要的方面是：使用 HTML 的 onXYZ 属性样式事件处理程序时，您只能调用全局函数，无法分配函数引用（如果在 DOM 元素上分配到 onxyz，则可以）。但是，使用 JSX 的 onXYZ 属性，您可以使用函数引用，并且该函数不必是（基本上从不是）全局的。 - T.J. Crowder

Answer 2

在以前的JavaScript时代，这被视为一种不好的实践，因为我们希望尽可能地将HTML和JS分离，以便更好地管理代码。你不能快速地通过另一堆来浏览HTML页面中的onClick。

而在React中，你可以通过组件树来管理应用程序代码。我认为React的优势是：

- 模块化 - 组合 - DRY（不要重复自己）

回到你的简单示例，onClick处理程序将很容易在你的组件内部进行管理。也许还有其他处理程序，但在一个组件的范围内仍然很方便。根据你的组件层次结构的层级，你想要做的任何事情都在同一页、同一个类、同一个函数上。

- An Nguyen