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