[[408242]]

本文轉(zhuǎn)載自微信公眾號(hào)「JS每日一題」，作者灰灰。轉(zhuǎn)載本文請(qǐng)聯(lián)系JS每日一題公眾號(hào)。

一、是什么

React基于瀏覽器的事件機(jī)制自身實(shí)現(xiàn)了一套事件機(jī)制，包括事件注冊(cè)、事件的合成、事件冒泡、事件派發(fā)等

在React中這套事件機(jī)制被稱之為合成事件

合成事件(SyntheticEvent)

合成事件是 React模擬原生 DOM事件所有能力的一個(gè)事件對(duì)象，即瀏覽器原生事件的跨瀏覽器包裝器

根據(jù) W3C規(guī)范來定義合成事件，兼容所有瀏覽器，擁有與瀏覽器原生事件相同的接口，例如：

const button = <button onClick={handleClick}>按鈕</button> 

如果想要獲得原生DOM事件，可以通過e.nativeEvent屬性獲取

const handleClick = (e) => console.log(e.nativeEvent);; 
const button = <button onClick={handleClick}>按鈕</button> 

從上面可以看到React事件和原生事件也非常的相似，但也有一定的區(qū)別：

• 事件名稱命名方式不同

// 原生事件綁定方式 
<button onclick="handleClick()">按鈕命名</button> 
       
// React 合成事件綁定方式 
const button = <button onClick={handleClick}>按鈕命名</button> 

• 事件處理函數(shù)書寫不同

// 原生事件 事件處理函數(shù)寫法 
<button onclick="handleClick()">按鈕命名</button> 
       
// React 合成事件 事件處理函數(shù)寫法 
const button = <button onClick={handleClick}>按鈕命名</button> 

雖然onclick看似綁定到DOM元素上，但實(shí)際并不會(huì)把事件代理函數(shù)直接綁定到真實(shí)的節(jié)點(diǎn)上，而是把所有的事件綁定到結(jié)構(gòu)的最外層，使用一個(gè)統(tǒng)一的事件去監(jiān)聽

這個(gè)事件監(jiān)聽器上維持了一個(gè)映射來保存所有組件內(nèi)部的事件監(jiān)聽和處理函數(shù)。當(dāng)組件掛載或卸載時(shí)，只是在這個(gè)統(tǒng)一的事件監(jiān)聽器上插入或刪除一些對(duì)象

當(dāng)事件發(fā)生時(shí)，首先被這個(gè)統(tǒng)一的事件監(jiān)聽器處理，然后在映射里找到真正的事件處理函數(shù)并調(diào)用。這樣做簡(jiǎn)化了事件處理和回收機(jī)制，效率也有很大提升

二、執(zhí)行順序

關(guān)于React合成事件與原生事件執(zhí)行順序，可以看看下面一個(gè)例子：

import  React  from 'react'; 
class App extends React.Component{ 
 
  constructor(props) { 
    super(props); 
    this.parentRef = React.createRef(); 
    this.childRef = React.createRef(); 
  } 
  componentDidMount() { 
    console.log("React componentDidMount！"); 
    this.parentRef.current?.addEventListener("click", () => { 
      console.log("原生事件：父元素 DOM 事件監(jiān)聽！"); 
    }); 
    this.childRef.current?.addEventListener("click", () => { 
      console.log("原生事件：子元素 DOM 事件監(jiān)聽！"); 
    }); 
    document.addEventListener("click", (e) => { 
      console.log("原生事件：document DOM 事件監(jiān)聽！"); 
    }); 
  } 
  parentClickFun = () => { 
    console.log("React 事件：父元素事件監(jiān)聽！"); 
  }; 
  childClickFun = () => { 
    console.log("React 事件：子元素事件監(jiān)聽！"); 
  }; 
  render() { 
    return ( 
      <div ref={this.parentRef} onClick={this.parentClickFun}> 
        <div ref={this.childRef} onClick={this.childClickFun}> 
          分析事件執(zhí)行順序 
        </div> 
      </div> 
    ); 
  } 
} 
export default App; 

輸出順序?yàn)椋?/p>

原生事件：子元素 DOM 事件監(jiān)聽！  
原生事件：父元素 DOM 事件監(jiān)聽！  
React 事件：子元素事件監(jiān)聽！  
React 事件：父元素事件監(jiān)聽！  
原生事件：document DOM 事件監(jiān)聽！  

可以得出以下結(jié)論：

• React 所有事件都掛載在 document 對(duì)象上
• 當(dāng)真實(shí) DOM 元素觸發(fā)事件，會(huì)冒泡到 document 對(duì)象后，再處理 React 事件
• 所以會(huì)先執(zhí)行原生事件，然后處理 React 事件
• 最后真正執(zhí)行 document 上掛載的事件

對(duì)應(yīng)過程如圖所示：

所以想要阻止不同時(shí)間段的冒泡行為，對(duì)應(yīng)使用不同的方法，對(duì)應(yīng)如下：

• 阻止合成事件間的冒泡，用e.stopPropagation()
• 阻止合成事件與最外層 document 上的事件間的冒泡，用e.nativeEvent.stopImmediatePropagation()
• 阻止合成事件與最外層document上的原生事件上的冒泡，通過判斷e.target來避免

document.body.addEventListener('click', e => {    
    if (e.target && e.target.matches('div.code')) {   
        return;     
    }     
    this.setState({   active: false,    });   });  
} 

三、總結(jié)

React事件機(jī)制總結(jié)如下：

• React 上注冊(cè)的事件最終會(huì)綁定在document這個(gè) DOM 上，而不是 React 組件對(duì)應(yīng)的 DOM(減少內(nèi)存開銷就是因?yàn)樗械氖录冀壎ㄔ? document 上，其他節(jié)點(diǎn)沒有綁定事件)
• React 自身實(shí)現(xiàn)了一套事件冒泡機(jī)制，所以這也就是為什么我們 event.stopPropagation()無效的原因。
• React 通過隊(duì)列的形式，從觸發(fā)的組件向父組件回溯，然后調(diào)用他們 JSX 中定義的 callback
• React 有一套自己的合成事件 SyntheticEvent

參考文獻(xiàn)

• https://zh-hans.reactjs.org/docs/events.html
• https://segmentfault.com/a/1190000015725214?utm_source=sf-similar-article
• https://segmentfault.com/a/1190000038251163