React事件機制與通常事件的混用

react的事件機制

react事件的核心內容就是事件委派，指全部的組件全部內部事件都綁定到結構的最外層，一般是document。在這個最外層上維持一個映射來保存全部組件內部的事件監聽和處理函數。當事件發生的時候，先是被事件監聽器捕捉，而後找到真正的事件處理函數。這麼作主要的好處有 1.全部的事件都是掛載在一個元素上，能夠極大的省去事件掛載的資源，就好比一個list有多個li，每一個都須要掛載事件，這樣掛載只須要掛一個事件，而若是對每個li進行掛載，那麼掛載的事件個數就會瘋狂增長，是對內存的一種損耗 2.卸載事件的時候簡潔而便利，回收機制只須要處理一個總的掛載資源就能夠

具體階段主要分爲兩個階段1.事件註冊2.事件觸發 1.首先將事件註冊在最外層 2.將事件的內容進行存儲 2.經過dispatchEvent來進行事件派發 源碼可見這篇文章 www.jianshu.com/p/c01756e52…

寫法上借鑑的是Dom0的寫法

<button onclick="hancleClick()"></button>
複製代碼

react中使用通常事件

可是咱們在react開發過程當中每每不能只用react事件體系，一般須要用到原生體系來解決一些問題，而用原生體系若是遺漏了一些細節的話，很容易致使一些問題。

由於react的事件體系沒法很好的在組件內部綁定全局事件，因此全局事件用到原生綁定的機率是最高的，好比須要在window上綁定size事件，須要在document上綁定事件，除了這個以外一些好比點擊除了某區域外的內容都會執行的事件也很適合用全局來進行綁定。

可是若是在使用原生事件的時候沒有去把每個事件進行回收的話，會形成內存溢出，由於react的router切換組件的時候會進行組件的卸載，而後再次進入的時候掛載，因此事件會屢次進行綁定，針對一個線上的服務，內存溢出是一個很危險的點。

上面講了react事件和通常事件混用內存溢出的問題，接下來說第二個問題 你們能夠想象這樣一種場景，app上點擊一塊內容須要展現二維碼，而後點擊非二維碼區域進行關閉。 這個按照咱們正常的事件邏輯，處理方式有兩種

1. 在全局綁定點擊事件，而後觸發事件的時候判斷class名稱來判斷是否觸發邏輯
2. 在全局綁定事件，在觸發事件的時候經過阻止事件冒泡來進行處理 通常二者用的人都有，可是阻止冒泡在理解以後處理起來比較簡單

//核心代碼
componentDidMount(){
    document.body.addEventListener('click',e=>{
        this.setState({
            qrActive:true
        })
    })
}

handleClickQr(e){
    e.stopPropagation();
}

複製代碼

然而你們回去試一下，能夠發現，具體的結果呈現和你想象中的並不一致，你點擊二維碼區域也會把二維碼隱藏起來，這是爲何呢？冒泡機制沒有成功被打斷？

其實並非，若是你還記得剛剛說的react事件機制就能知道，react的事件就是統一掛載在頂級dom上的，因此react的事件機制根本沒有經歷你想象中的從頂級元素到二維碼的捕獲，目標，冒泡階段，因此阻止事件冒泡並不能阻止body綁定的click事件的執行，若是你想要進行上述的邏輯判斷，仍是要使用第一種處理方式.

可是原生組件的阻止冒泡行爲卻能夠阻止react事件合成機制.