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

Question

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

在Jon编写的Javascript和Jquery一书中，作者提到使用HTML事件处理程序属性被认为是错误的做法，例如：

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

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

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

这有什么原因吗？这是因为这是在React中绑定事件处理程序的唯一方法吗?在我看来，它的反应本质上是通过HTML构建组件元素，但使用事件处理程序属性将事件分配给它，那么为什么React要带回一个被认为是错误实践的概念呢？

Answer 1

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

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

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

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

在反应中，我们不希望将表示和逻辑分离，而是需要独立的组件。这就是它与仅使用"Vanilla JavaScript“/ DOM的应用程序不同的地方。

Answer 2

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

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

• 模块化
• 作文
• 干(不要重复)

回到简单的示例中，onClick处理程序将很容易地在组件中进行管理。也许还可以使用其他处理程序，但在1组件的范围内仍然很方便。取决于组件层次的级别，您想要做的一切都位于同一个页面、相同的类、相同的函数上。