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

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

在React中，您可以通过组件树管理应用程序代码。我认为React的力量是：

• 模块化
• 组合物
• 干（不要重复）

回到您的简单示例，您可以在组件内轻松管理onClick处理程序。也许还有其他一些处理程序，但它仍然在1个组件的范围内很方便。取决于您的组件层级，您想要做的一切都在同一页面，相同的类，相同的功能。

Answer 2

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

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

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

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

在React中，我们不希望分离表示和逻辑，而是自包含组件。这就是它与使用＆＃34; Vanilla JavaScript＆＃34;的应用程序区别开来的原因。 / DOM API。