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

问题描述：

我想在HTML和React中使用时询问有关事件处理程序的问题。HTML事件处理程序与React事件处理程序

在这本书中的Javascript和jQuery由乔恩·达克特写的，作者提到，使用HTML事件处理程序的属性被认为是不好的做法比如像下面这样：

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

但最近我开始学习反应和组件的定义时，也有用作属性事件处理的例子很多，似乎普遍这样做，不这样做让批评，

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

有什么理由这个？是因为这是绑定React？中的事件处理程序的唯一方法，从我看到它的方式来看React基本上是通过HTML构建组件元素，但使用事件处理程序属性为它分配事件，因此为什么是React带回被认为是不好实践的概念？

答

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

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

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

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

在React中，我们不希望将表示和逻辑分离，而是自包含的组件。这就是使用“Vanilla JavaScript”/ DOM API的应用程序。

答

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

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

回到你的简单的例子，onClick处理程序将很容易地内管理你的组件。也许还有其他一些处理程序，但在1组件的范围内仍然很方便。取决于组件层次的哪个级别，你想要做的每件事都在同一个页面，同一个类，相同的功能上。