1. 程式人生 > >React事件系統入門

React事件系統入門

保存 組件 綁定 pos 通過 機制 兼容 target 我們

React基於虛擬DOM實現了一個合成事件層,我們所定義的事件處理器會接受到一個合成事件層對象的實例,它完全符合W3C標準,不會存在任何IE標準的兼容性問題。並且和原生的瀏覽器事件一樣擁有同樣的接口,同樣支持事件的冒泡機制。所有事件都自動綁定到最外層上。

  • 合成事件的實現機制
    React不會把事件處理函數直接綁定到真實的節點上。而是把所有事件綁定到結構的最外層,使用一個統一的事件監聽器,這個事件監聽器維持了一個映射保存所有組件內部的事件監聽和處理函數。當有事件發生的時候,首先由這個事件監聽器處理,然後事件監聽器在映射裏面找到真正的事件處理函數並調用。這樣做簡化了事件處理和回收機制,效率很大的提升了。

在React中使用DOM原生事件時,一定要在組件卸載的時候,手動移除,否則可能會出現內存泄漏的問題,而在使用合成事件系統的時候,則不需要,因為React內部已經幫你妥善處理好這些問題了。

雖然合成事件能夠解決內存泄漏的問題,但是在某些情況下,還是必須使用原生的時間才能實現。不要講合成事件和原生事件混用,但是也可以通過e.target判斷來避免。實際上,React的合成事件系統只是原生DOM事件系統的一個子集

React事件系統入門