React合成事件詳解
react合成事件指的是react用js模擬了一個(gè)Dom事件流。（fiber樹模擬Dom樹結(jié)構(gòu)） 合成事件的事件流在fiber樹中發(fā)生捕獲和冒泡。
從點(diǎn)擊輸入框開始
當(dāng)你點(diǎn)擊input輸入框，react在根節(jié)點(diǎn)（注1）監(jiān)聽到focus事件（注2）（注3）。
如何從原生事件找到對(duì)應(yīng)的虛擬Dom？
此時(shí)，react得到的信息只有原生事件對(duì)象（nativeEvent）。react通過nativeEvent對(duì)應(yīng)的Dom（eventTarget），沿著Dom樹向上找到距離該eventTarget最近的被react管理的Dom節(jié)點(diǎn)（注4）（注5），并獲得對(duì)應(yīng)的fiber A。
接著通過事件插件（注6），創(chuàng)建合成事件（注7）A。合成事件A被react視為模擬事件流中的事件源，fiber A被react視為事件目標(biāo)。
合成事件流？
從fiber A出發(fā)向上（直到頂層fiber HostComponent為止）收集所有的host類型的fiber。 然后將收集到的fiber數(shù)組，從后向前（捕獲），再從前向后（冒泡）遍歷。每次遍歷，會(huì)收集（注8）當(dāng)前遍歷項(xiàng)fiber節(jié)點(diǎn)的綁定的focus事件。之后（事件插件完成后，即合成事件生成好了）會(huì)按照收集的順序執(zhí)行foucs回調(diào)。 react就是這樣模擬了事件流。
擴(kuò)展
點(diǎn)擊輸入框引起多個(gè)事件
除了focus外，也觸發(fā)了其他的事件--click等。react在根節(jié)點(diǎn)對(duì)不同類型的事件進(jìn)行了監(jiān)聽，每監(jiān)聽到一種事件就會(huì)派發(fā)一次，多種類型的事件，會(huì)派發(fā)多次。 點(diǎn)擊輸入框，會(huì)先后觸發(fā)focus和click。當(dāng)focus事件的派發(fā)完后，就會(huì)派發(fā)click事件。 每次某個(gè)事件派發(fā)結(jié)束，會(huì)處理待處理的同步任務(wù)隊(duì)列（flushSyncCallBackQueue）。
意料之外的render？
在NoMode模式下，多次派發(fā)事件且每個(gè)事件都改變了狀態(tài)（如調(diào)用setState），則對(duì)應(yīng)組件會(huì)被render多次。 在本例中，點(diǎn)擊input輸入框，如果給input綁定了focus事件和click事件并且事件回調(diào)都調(diào)用setState，input將會(huì)render兩次。
為什么react中的input設(shè)置value后成為受控組件？
react中，在input設(shè)置了value屬性的條件下，無論在輸入框中輸入什么，輸入框的值都不會(huì)改變。除非你改變了input組件的state。 react在處理完模擬事件流后，會(huì)調(diào)用方法將一些意外的效果重置。 例如該場景，在input中輸入了一個(gè)值，input輸入框會(huì)出現(xiàn)你輸入的值，但馬上input的值會(huì)被對(duì)應(yīng)的fiber的value屬性更新（finishEventHander 重置受控組件）。 如果沒有給input設(shè)置value則會(huì)忽略。
為什么合成事件屬性有時(shí)無法訪問？
因?yàn)閞eact在事件流（捕獲到冒泡）完后就將合成事件對(duì)象釋放（SyntheticEvent.prototype.destructor 將合成事件對(duì)象的屬性重置）。
react如何模擬事件的阻止冒泡、阻止默認(rèn)行為？
react按照事件流順序執(zhí)行回調(diào)，在執(zhí)行前會(huì)檢查當(dāng)前合成事件對(duì)象是否處于阻止冒泡的狀態(tài)，如果是，則終止事件流。 react的合成事件對(duì)象原型對(duì)原生函數(shù)進(jìn)行增強(qiáng)。對(duì)原生事件方法的阻止冒泡、阻止默認(rèn)行為進(jìn)行了封裝（內(nèi)部也調(diào)用原生事件的方法）。
注釋
注1：根節(jié)點(diǎn)，在 react-v16 為 document ，在 react-v17 為掛載容器Dom
注2：focus事件并不是冒泡事件，react對(duì)非冒泡事件在捕獲階段監(jiān)聽
注3：根節(jié)點(diǎn)對(duì)所有事件進(jìn)行了監(jiān)聽，除了特別例外submit、reset、invalid和媒體事件等
注4：react將fiber樹掛載到Dom樹上時(shí)，每個(gè)宿主（host）類型fiber節(jié)點(diǎn)與Dom節(jié)點(diǎn)一一對(duì)應(yīng)，并鏈接
注5：向上查找是因?yàn)榭赡茏覦om節(jié)點(diǎn)并不是被react管理的，如第三庫滾動(dòng)插件等
注6：為了模擬Dom事件，react進(jìn)行的補(bǔ)充
注7：react內(nèi)部一個(gè)構(gòu)造函數(shù)的實(shí)例，合成事件的部分屬性來源于nativeEvent。合成事件與fiber關(guān)聯(lián)
注8：收集而不是執(zhí)行。因?yàn)閞eact針對(duì)某一類型事件的做了批處理
以上就是React合成事件詳解的詳細(xì)內(nèi)容，更多關(guān)于React合成事件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼
這篇文章主要介紹了Reactjs實(shí)現(xiàn)通用分頁組件的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-01-01
ReactNative實(shí)現(xiàn)圖片上傳功能的示例代碼
本篇文章主要介紹了ReactNative實(shí)現(xiàn)圖片上傳功能的示例代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-07-07
React代碼分割主要是為了優(yōu)化首屏加載速度,避免一次性加載整個(gè)應(yīng)用,把代碼拆分成多個(gè)bundle,按需加載,下面就一起來了解一下,感興趣的可以了解一下2025-09-09
React是用于構(gòu)建用戶界面的JavaScript庫。本文詳細(xì)講解了React的生命周期，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-03-03
在React中使用React.createRef：更優(yōu)雅的DOM引用方式
React提供了多種方式來引用DOM元素,其中React.createRef()是一種更為現(xiàn)代、更優(yōu)雅的方式,在這篇文章中,我們將深入了解React.createRef()的應(yīng)用,以及它為開發(fā)者帶來的便利,感興趣的朋友一起看看吧2024-01-01
React.memo 和 useMemo 的使用問題小結(jié)
隨著代碼的增加，每次的狀態(tài)改變，頁面進(jìn)行一次 reRender ，這將產(chǎn)生很多不必要的 reRender 不僅浪費(fèi)性能，從而導(dǎo)致頁面卡頓，這篇文章主要介紹了React.memo 和 useMemo 的使用問題小結(jié),需要的朋友可以參考下2022-11-11
react將文件轉(zhuǎn)為base64上傳的示例代碼
本文主要介紹了react將文件轉(zhuǎn)為base64上傳的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-09-09
React Ant Design樹形表格的復(fù)雜增刪改操作
這篇文章主要介紹了React Ant Design樹形表格的復(fù)雜增刪改操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要給大家介紹了關(guān)于React.Js添加與刪除onScroll事件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
在React中引用CSS的方法有多種,可以根據(jù)個(gè)人的喜好和項(xiàng)目的需求來選擇，本文主要介紹了React中引用CSS方式及寫法大全，感興趣的可以了解一下2023-10-10