react合成事件與原生事件的相關理解

Posted on by

1. 原生事件

原生事件就是js的原生事件，如通過document.addEventListener來設置的監聽事件。

在react中即使有自己的一套事件機制（見下面合成事件），但有時候的業務場景我們仍然需要使用原生事件。比如我們封裝一個Modal彈窗組件，需要在點擊非彈窗區域時關掉彈窗，此時我們隻能針對document進行原生點擊事件監聽。

由於原生事件需要綁定在真實DOM上，所以一般是在componentDidMount階段或者組件/元素的ref的函數執行階段進行綁定操作，並且註意要在componentWillUnmount階段進行解綁操作以避免內存泄漏。

2. 合成事件

React有自己的一套事件機制,它重新封裝瞭絕大部分的原生事件。合成事件采用瞭事件池，這樣做可以大大節省內存，而不會頻繁的創建和銷毀事件對象。

在React中，如果需要綁定事件，我們常常在jsx中這麼寫：

handleClick(){
}
<div onClick={this.handleClick.bind(this)}>
	react事件
</div>

大致原理：

React並不是將click事件綁在該div的真實DOM上，而是在document處監聽所有支持的事件，當事件發生並冒泡至document處時，React將事件內容封裝並交由真正的處理函數運行。

以上面的代碼為例，整個事件生命周期示意如下：

合成事件的一些特點總結：

  • React 上註冊的事件最終會綁定在document這個 DOM 上，而不是 React 組件對應的 DOM(減少內存開銷就是因為所有的事件都綁定在 document 上，其他節點沒有綁定事件)
  • React 通過隊列的形式，從觸發的組件向父組件回溯，然後調用他們 JSX 中定義的 callback
  • React 通過對象池的形式管理合成事件對象的創建和銷毀，減少瞭垃圾的生成和新對象內存的分配，提高瞭性能

瞭解react合成事件的大概原理後，方便我們解答下面一個問題：

為什麼react事件需要手動綁定this

合成事件觸發之後會冒泡一路到document的節點，然後開始分發document節點收集到的事件，這個時候react從事件觸發的組件實例開始， 遍歷虛擬dom樹，從樹上取下我們綁定的事件，收集起來，然後執行。舉個例子：

class Test extends React.Component {
   fatherHandler =  function father() { /*...*/}
   childHander = function child() {/*...*/}

   render(){
     return (
       <div onClick={this.fatherHandler}>
         <span onClick={this.childHander}>
         </span>
       </div>
     );
   }

}

當事件觸發以後react會把上面的事件處理函數放到一個數組裡是這樣的

[father, child]

最後，react隻要遍歷執行這個數組，就能執行所有需要執行的事件處理函數。這裡react對函數進行瞭臨時保存，這個時候執行的話，this自然就丟失瞭。

如果react保存順便保存一下實例，還是可以做到，不需要你綁定this的，但是這樣對於react來說代價太大瞭。

3. 原生與合成事件觸發順序

  componentDidMount() {
    this.parent.addEventListener('click', (e) => {
      console.log('dom parent');
    })
    this.child.addEventListener('click', (e) => {
      console.log('dom child');
    })
    document.addEventListener('click', (e) => {
      console.log('document');
    })
  }

  childClick = (e) => {
    console.log('react child');
  }

  parentClick = (e) => {
    console.log('react parent');
  }

  render() {
    return (
      <div onClick={this.parentClick} ref={ref => this.parent = ref}>
        <div onClick={this.childClick} ref={ref => this.child = ref}>
          test
        </div>
      </div>)
  }

點擊child中的test後，事件觸發順序如下：

結論：

無論是否是對於同一元素監聽的同種類型事件，原生事件總是比合成事件先觸發。這是由於上面我們說到的合成事件最終都會綁定到documnet DOM上導致的，當合成事件監聽到後，總是冒泡到document才會真正觸發。 而documnet DOM上監聽的原生事件則總是最後觸發

4. 合成事件和原生事件混用

react合成事件和原生事件最好不要混用。

原生事件中如果執行瞭stopPropagation（阻止冒泡）方法，則很容易導致其他同類型react合成事件失效。因為這樣所有同級以及後代元素的合成事件和原生事件都將無法冒泡到document上。

而如果僅僅是合成事件中使用瞭e.stopPropagation（阻止冒泡）方法，則不會影響原生事件的冒泡

相關疑問：

我們知道React事件監聽器中獲得的入參並不是瀏覽器原生事件，原生事件可以通過e.nativeEvent來獲取。通過這種方式，合成事件可以影響原生事件嗎？

e.nativeEvent.stopPropagation

即使在react的合成事件中調用原生事件的阻止冒泡，實際作用是在DOM最外層阻止冒泡，並不符合預期。也就是說它最終隻能控制當前監聽的合成事件不會冒泡到document DOM的原生事件

e.nativeEvent.stopImmediatePropagation

該方法與上面的nativeEvent.stopPropagation有類似的功能,都可阻止當前監聽的合成事件冒泡到document DOM的原生事件

stopImmediatePropagation常常在多個第三方庫混用時，用來阻止多個事件監聽器中的非必要執行。比如同一個元素的同種事件,設置瞭多個監聽事件函數,則該方式可以控制監聽函數隻觸發第一個

stopImmediatePropagation和stopPropagation本都是原生事件,但在React自己的事件體系中，重新封裝瞭後者,卻沒有封裝前者。導致在合成事件中隻能手動調用nativeEvent.stopImmediatePropagation。

因為在React的合成事件機制中,一個組件隻能綁定一個同類型的事件監聽器（重復定義時，後面的監聽器會覆蓋之前的），所以合成事件無需去封裝stopImmediatePropagation。

所以,在React的合成事件中,e.nativeEvent.stopPropagation和e.nativeEvent.stopImmediatePropagation實際的作用是等價的

此外，由於事件綁定的順序問題，需要註意，如果是在react-dom.js加載前綁定的document原生事件，stopImmediatePropagation也是無法阻止的。

以上就是react合成事件與原生事件的相關理解的詳細內容，更多關於react合成事件與原生事件的資料請關註WalkonNet其它相關文章！

推薦閱讀：