React合成事件詳解
react合成事件指的是react用js模擬了一個Dom事件流。（fiber樹模擬Dom樹結(jié)構(gòu)） 合成事件的事件流在fiber樹中發(fā)生捕獲和冒泡。
從點擊輸入框開始
當你點擊input輸入框，react在根節(jié)點（注1）監(jiān)聽到focus事件（注2）（注3）。
如何從原生事件找到對應的虛擬Dom？
此時，react得到的信息只有原生事件對象（nativeEvent）。react通過nativeEvent對應的Dom（eventTarget），沿著Dom樹向上找到距離該eventTarget最近的被react管理的Dom節(jié)點（注4）（注5），并獲得對應的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é)束，會處理待處理的同步任務隊列（flushSyncCallBackQueue）。
意料之外的render？
在NoMode模式下，多次派發(fā)事件且每個事件都改變了狀態(tài)（如調(diào)用setState），則對應組件會被render多次。 在本例中，點擊input輸入框，如果給input綁定了focus事件和click事件并且事件回調(diào)都調(diào)用setState，input將會render兩次。
為什么react中的input設置value后成為受控組件？
react中，在input設置了value屬性的條件下，無論在輸入框中輸入什么，輸入框的值都不會改變。除非你改變了input組件的state。 react在處理完模擬事件流后，會調(diào)用方法將一些意外的效果重置。 例如該場景，在input中輸入了一個值，input輸入框會出現(xiàn)你輸入的值，但馬上input的值會被對應的fiber的value屬性更新（finishEventHander 重置受控組件）。 如果沒有給input設置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é)點一一對應，并鏈接
注5：向上查找是因為可能子Dom節(jié)點并不是被react管理的，如第三庫滾動插件等
注6：為了模擬Dom事件，react進行的補充
注7：react內(nèi)部一個構(gòu)造函數(shù)的實例，合成事件的部分屬性來源于nativeEvent。合成事件與fiber關聯(lián)
注8：收集而不是執(zhí)行。因為react針對某一類型事件的做了批處理
以上就是React合成事件詳解的詳細內(nèi)容，更多關于React合成事件的資料請關注腳本之家其它相關文章！
相關文章
React項目中fetch實現(xiàn)跨域接收傳遞session的解決方案
這篇文章主要介紹了React項目中fetch實現(xiàn)跨域接收傳遞session的解決方案,本次項目使用了react框架，同時使用fetch取代ajax作為獲取接口數(shù)據(jù)的交互方法，下面就對這次問題的解決做個總結(jié)，需要的朋友可以參考下2022-04-04
React核心就在于虛擬DOM，也就是在React中不總是直接操作頁面真實的DOM元素，并且結(jié)合Diffing算法，可以做到最小化頁面重繪，有些時候不可避免的我們需要一種方法可以操作我們定義的元素標簽，并作出對應的修改。在React中提供了一種訪問DOM節(jié)點的方式，也就是這里的refs2022-11-11
這篇文章主要為大家介紹了取消正在運行的Promise技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-06-06
這篇文章主要為大家介紹了React?useRef原理的深入理解分析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-05-05
這篇文章給大家總結(jié)了React中常用的一些鉤子函數(shù),文中通過代碼示例給大家介紹的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-01-01
React封裝高階組件實現(xiàn)路由權(quán)限的控制詳解
這篇文章主要介紹了React封裝高階組件實現(xiàn)路由權(quán)限的控制,在React中,為了實現(xiàn)安全可靠的路由權(quán)限控制,可以通過多種方式來確保只有經(jīng)過授權(quán)的用戶才能訪問特定路徑下的資源,下面來介紹封裝高階組件控制的方法,需要的朋友可以參考下2025-02-02
本文主要介紹了淺談React組件props默認值的設置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
這篇文章主要介紹了React添加或移除類的操作方法，本文通過示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-05-05
本篇文章主要介紹了關于react-router的幾種配置方式詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要為大家介紹了React官方團隊出手，補齊原生Hook短板閉包陷阱的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07