react———react合成事件

React合成事件

一react合成事件

若是DOM上綁定了過多的事件處理函數，整個頁面響應以及內存佔用可能都會受到影響。React爲了不這類DOM事件濫用，同時屏蔽底層不一樣瀏覽器之間的事件系統差別，實現了一箇中間層——SyntheticEvent。

1. 當用戶在爲onClick添加函數時，React並無將Click時間綁定在DOM上面。
2. 而是在document處監聽全部支持的事件，當事件發生並冒泡至document處時，React將事件內容封裝交給中間層SyntheticEvent（負責全部事件合成）
3. 因此當事件觸發的時候，對使用統一的分發函數dispatchEvent將指定函數執行。

二.合成事件和原生事件的執行順序是什麼？能夠混用嗎？

1.React的全部事件都經過 document進行統一分發。當真實 Dom觸發事件後冒泡到 document後纔會對 React事件進行處理。

2.因此原生的事件會先執行，而後執行 React合成事件，最後執行真正在 document上掛載的事件

3.React事件和原生事件最好不要混用。原生事件中若是執行了 stopPropagation方法，則會致使其餘 React事件失效。由於全部元素的事件將沒法冒泡到 document上，致使全部的 React事件都將沒法被觸發。。

 

 

參考：https://www.jianshu.com/p/8d8f9aa4b033