react合成事件指的是react用js模擬了一個Dom事件流。（fiber樹模擬Dom樹結(jié)構(gòu)） 合成事件的事件流在fiber樹中發(fā)生捕獲和冒泡。

從點擊輸入框開始

當你點擊input輸入框，react在根節(jié)點（注1）監(jiān)聽到focus事件（注2）（注3）。

如何從原生事件找到對應(yīng)的虛擬Dom？

此時，react得到的信息只有原生事件對象（nativeEvent）。react通過nativeEvent對應(yīng)的Dom（eventTarget），沿著Dom樹向上找到距離該eventTarget最近的被react管理的Dom節(jié)點（注4）（注5），并獲得對應(yīng)的fiber A。

接著通過事件插件（注6），創(chuàng)建合成事件（注7）A。合成事件A被react視為模擬事件流中的事件源，fiber A被react視為事件目標。

合成事件流？

從fiber A出發(fā)向上（直到頂層fiber HostComponent為止）收集所有的host類型的fiber。 然后將收集到的fiber數(shù)組，從后向前（捕獲），再從前向后（冒泡）遍歷。每次遍歷，會收集（注8）當前遍歷項fiber節(jié)點的綁定的focus事件。之后（事件插件完成后，即合成事件生成好了）會按照收集的順序執(zhí)行foucs回調(diào)。 react就是這樣模擬了事件流。

擴展

點擊輸入框引起多個事件

除了focus外，也觸發(fā)了其他的事件--click等。react在根節(jié)點對不同類型的事件進行了監(jiān)聽，每監(jiān)聽到一種事件就會派發(fā)一次，多種類型的事件，會派發(fā)多次。 點擊輸入框，會先后觸發(fā)focus和click。當focus事件的派發(fā)完后，就會派發(fā)click事件。 每次某個事件派發(fā)結(jié)束，會處理待處理的同步任務(wù)隊列（flushSyncCallBackQueue）。

意料之外的render？

在NoMode模式下，多次派發(fā)事件且每個事件都改變了狀態(tài)（如調(diào)用setState），則對應(yīng)組件會被render多次。 在本例中，點擊input輸入框，如果給input綁定了focus事件和click事件并且事件回調(diào)都調(diào)用setState，input將會render兩次。

為什么react中的input設(shè)置value后成為受控組件？

react中，在input設(shè)置了value屬性的條件下，無論在輸入框中輸入什么，輸入框的值都不會改變。除非你改變了input組件的state。 react在處理完模擬事件流后，會調(diào)用方法將一些意外的效果重置。 例如該場景，在input中輸入了一個值，input輸入框會出現(xiàn)你輸入的值，但馬上input的值會被對應(yīng)的fiber的value屬性更新（finishEventHander 重置受控組件）。 如果沒有給input設(shè)置value則會忽略。

為什么合成事件屬性有時無法訪問？

因為react在事件流（捕獲到冒泡）完后就將合成事件對象釋放（SyntheticEvent.prototype.destructor 將合成事件對象的屬性重置）。

react如何模擬事件的阻止冒泡、阻止默認行為？

react按照事件流順序執(zhí)行回調(diào)，在執(zhí)行前會檢查當前合成事件對象是否處于阻止冒泡的狀態(tài)，如果是，則終止事件流。 react的合成事件對象原型對原生函數(shù)進行增強。對原生事件方法的阻止冒泡、阻止默認行為進行了封裝（內(nèi)部也調(diào)用原生事件的方法）。

注釋

注1：根節(jié)點，在 react-v16 為 document ，在 react-v17 為掛載容器Dom
注2：focus事件并不是冒泡事件，react對非冒泡事件在捕獲階段監(jiān)聽
注3：根節(jié)點對所有事件進行了監(jiān)聽，除了特別例外submit、reset、invalid和媒體事件等
注4：react將fiber樹掛載到Dom樹上時，每個宿主（host）類型fiber節(jié)點與Dom節(jié)點一一對應(yīng)，并鏈接
注5：向上查找是因為可能子Dom節(jié)點并不是被react管理的，如第三庫滾動插件等
注6：為了模擬Dom事件，react進行的補充
注7：react內(nèi)部一個構(gòu)造函數(shù)的實例，合成事件的部分屬性來源于nativeEvent。合成事件與fiber關(guān)聯(lián)
注8：收集而不是執(zhí)行。因為react針對某一類型事件的做了批處理

以上就是React合成事件詳解的詳細內(nèi)容，更多關(guān)于React合成事件的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論