在 JSX 中可以通過 onClick 這樣的方式給一個元素添加一個事件處理函數，當然，在 HTML 中也可以用 onclick (小寫 c)，但在 HTML 中直接書寫 onclick 一直就是爲人垢病的寫法，網頁應用開發界一直倡導的是用 jQuery 的方法添加事件處理函數，直接寫 onclick 會帶來代碼混亂的問題。
爲什麼 HTML 中直接使用 onclick 很不專業？
1、onclick 添加的事件處理函數是在全局環境下執行的，這污染了全局環境，很容易產生意料不到的後果；
2、給很多 DOM 元素添加 onclick 事件，可能會影響網頁的性能，畢竟，網頁需要的事件處理函數越多，性能就會越低；
3、對於使用 onclick 的 DOM 元素，如果要動態地從 DOM 樹中刪掉的話，需要把對應的時間處理器註銷，假如忘了註銷，就可能造成內存泄露，這樣的 bug 很難被發現
這就帶來一個問題：
既然長期以來一直不倡導在 HTML 中使用 onclick，爲什麼在 React 的 JSX 中我們卻要使用 onClick 這樣的方式來添加事件處理函數呢?
JSX onClick 和 HTML onclick 的區別
上面 HTML onclick 的這些問題，在 JSX 中都不存在，JSX 的 onClick 事件處理方式和 HTML 的 onclick 有很大不同
onClick 掛載的每個函數，都可以控制在組件範圍內，不會污染全局空間。
JSX 中的組件使用 onClick，並不會產生直接使用 onclick 的 HTML，而是使用了事件委託（event delegation）的方式處理點擊事件，無論有多少個 onClick 出現，其實最後都只在 DOM 樹上添加了一個事件處理函數，掛在最頂層的 DOM 節點上。所有的點擊事件都被這個事件處理函數捕獲，然後根據具體組件分配給特定函數，使用事件委託的性能當然要比爲每個 onClick 都掛載一個事件處理函數要高。
因爲 React 控制了組件的生命週期，在 unmount 的時候自然能夠清除相關的所有事件處理函數，內存泄露也不再是一個問題。