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

更新時間：2021年05月13日 17:13:47 作者：鑄心

本文主要介紹了react合成事件與原生事件的相關概念，幫助大家區(qū)分這兩種事件，學習react的同學不妨了解下

1. 原生事件

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

在react中即使有自己的一套事件機制（見下面合成事件），但有時候的業(yè)務場景我們?nèi)匀恍枰褂迷录１热缥覀兎庋b一個Modal彈窗組件，需要在點擊非彈窗區(qū)域時關掉彈窗，此時我們只能針對document進行原生點擊事件監(jiān)聽。

由于原生事件需要綁定在真實DOM上，所以一般是在componentDidMount階段或者組件/元素的ref的函數(shù)執(zhí)行階段進行綁定操作，并且注意要在componentWillUnmount階段進行解綁操作以避免內(nèi)存泄漏。

2. 合成事件

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

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

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

大致原理：

React并不是將click事件綁在該div的真實DOM上，而是在document處監(jiān)聽所有支持的事件，當事件發(fā)生并冒泡至document處時，React將事件內(nèi)容封裝并交由真正的處理函數(shù)運行。

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

合成事件的一些特點總結(jié)：

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

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

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

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

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

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

}

當事件觸發(fā)以后react會把上面的事件處理函數(shù)放到一個數(shù)組里是這樣的

[father, child]

最后，react只要遍歷執(zhí)行這個數(shù)組，就能執(zhí)行所有需要執(zhí)行的事件處理函數(shù)。這里react對函數(shù)進行了臨時保存，這個時候執(zhí)行的話，this自然就丟失了。

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

3. 原生與合成事件觸發(fā)順序

  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后，事件觸發(fā)順序如下：

結(jié)論：

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