結合源碼完全理解 react事件機制原理 02 - 對於合成的理解

前言

這是react事件機制系列文章的第二篇-對於合成的理解，我們就來講說合成這個名詞。

剛據說合成這個詞時候，感受是特別高大上，頗有深度，不是很好理解。

當我大概的瞭解過react事件機制後，略微瞭解一些皮毛，我以爲合成不僅僅是事件的合成和處理，從廣義上來講還包括：

1.首先就是對原生事件的封裝

2.對某些原生事件的升級和改造

3.不一樣瀏覽器事件兼容的處理

---

1. 對原生事件的封裝

先看一段再熟悉不過的代碼

上面代碼是給一個元素添加click事件的回調方法

方法中的參數e，其實不是原生事件對象而是react包裝過的對象，同時原生事件對象被放在了屬性 e.nativeEvent 內。

經過調試，在執行棧裏看下這個參數e包含哪些屬性

![clipboard.p

vhR)

![圖片上傳中...]

看下官方文檔，幫助咱們理解下合成事件

SyntheticEvent是react合成事件的基類，定義了合成事件的基礎公共屬性和方法。

react會根據當前的事件類型來使用不一樣的合成事件對象，好比鼠標單機事件 - SyntheticMouseEvent，焦點事件-SyntheticFocusEvent等，可是都是繼承自SyntheticEvent。

2.對原生事件的升級和改造

對於有些dom元素事件，咱們進行事件綁定以後，react並非只處理你聲明的事件類型，還會額外的增長一些其餘的事件，幫助咱們提高交互的體驗。

這裏就舉一個例子來講明下：

當咱們給input聲明個onChange事件，看下 react幫咱們作了什麼？

能夠看到react不僅是註冊了一個onchange事件，還註冊了不少其餘事件。

而這個時候咱們向文本框輸入內容的時候，是能夠實時的獲得內容的。

然而原生只註冊一個onchange的話，須要在失去焦點的時候才能觸發這個事件。

因此這個原生事件的缺陷react也幫咱們彌補了。

ps：上面紅色箭頭中有一個 invalid事件，這個並無註冊到document上，而是在具體的元素上。個人理解是這個是html5新增的一個事件，當輸入的數據不符合驗證規則的時候自動觸發，然而驗證規則和配置都要寫在當前input元素上，若是註冊到document上這個事件就無效了。

3.瀏覽器事件的兼容處理

這個也算是一個點吧。react在給document註冊事件的時候也是對兼容性作了處理。

看下代碼

上面這個代碼其實就是給document註冊事件，內部其實也是作了對ie瀏覽器的兼容。

總結：

以上就是我對於react合成這個名詞的理解，其實react內部還處理了不少，我只是略微簡單的舉了幾個栗子。

本文算是一個過分吧，後面開始聊事件註冊和事件派發的機制。走起~

更多精彩內容歡迎關注個人公衆號-前端張大胖