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

在Java的前一個時代，這被認為是不好的做法，因為我們希望盡可能地將HTML和JS分開以進行更好的代碼管理。 您無法通過另一個button快速導航到HTML頁面中的onClick 。

在React中，您可以通過組件樹管理應用程序代碼。 我認為React的力量是：

回到您的簡單示例，可以輕松地在組件內部管理onClick處理程序。 也許也可以與其他處理程序一起使用，但在1組件的范圍內仍然很方便。 根據組件層次結構的不同，您要執行的所有操作都位於同一頁，同一類，同一函數上。

Answer 2

為什么內聯事件偵聽器是不好的做法？

HTML描述文檔的內容和結構，CSS描述外觀，JavaScript描述邏輯或行為。 這些東西應該分開存放。 HTML和JavaScript代碼不應混用。 您的示例是：

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

但是，這不適用於React：我們沒有一個HTML文件。 相反，我們有模塊化的組件，它們具有自己的結構，樣式和行為。

在React中，我們不希望將表示和邏輯分離，而是希望將獨立的組件分離。 這就是它與僅使用“ Vanilla JavaScript” / DOM API的應用程序不同的地方。