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 带来了支持一个被认为是不好的做法的概念？

Answer 1

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

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

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

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

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