[[408242]]

本文轉載自微信公眾號「JS每日一題」，作者灰灰。轉載本文請聯系JS每日一題公眾號。

一、是什么

React基于瀏覽器的事件機制自身實現了一套事件機制，包括事件注冊、事件的合成、事件冒泡、事件派發等

在React中這套事件機制被稱之為合成事件

合成事件(SyntheticEvent)

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

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

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

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

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

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

• 事件名稱命名方式不同

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

• 事件處理函數書寫不同

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

雖然onclick看似綁定到DOM元素上，但實際并不會把事件代理函數直接綁定到真實的節點上，而是把所有的事件綁定到結構的最外層，使用一個統一的事件去監聽

這個事件監聽器上維持了一個映射來保存所有組件內部的事件監聽和處理函數。當組件掛載或卸載時，只是在這個統一的事件監聽器上插入或刪除一些對象

當事件發生時，首先被這個統一的事件監聽器處理，然后在映射里找到真正的事件處理函數并調用。這樣做簡化了事件處理和回收機制，效率也有很大提升

二、執行順序

關于React合成事件與原生事件執行順序，可以看看下面一個例子：

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 事件監聽！"); 
    }); 
    this.childRef.current?.addEventListener("click", () => { 
      console.log("原生事件：子元素 DOM 事件監聽！"); 
    }); 
    document.addEventListener("click", (e) => { 
      console.log("原生事件：document DOM 事件監聽！"); 
    }); 
  } 
  parentClickFun = () => { 
    console.log("React 事件：父元素事件監聽！"); 
  }; 
  childClickFun = () => { 
    console.log("React 事件：子元素事件監聽！"); 
  }; 
  render() { 
    return ( 
      <div ref={this.parentRef} onClick={this.parentClickFun}> 
        <div ref={this.childRef} onClick={this.childClickFun}> 
          分析事件執行順序 
        </div> 
      </div> 
    ); 
  } 
} 
export default App; 

輸出順序為：

原生事件：子元素 DOM 事件監聽！  
原生事件：父元素 DOM 事件監聽！  
React 事件：子元素事件監聽！  
React 事件：父元素事件監聽！  
原生事件：document DOM 事件監聽！  

可以得出以下結論：

• React 所有事件都掛載在 document 對象上
• 當真實 DOM 元素觸發事件，會冒泡到 document 對象后，再處理 React 事件
• 所以會先執行原生事件，然后處理 React 事件
• 最后真正執行 document 上掛載的事件

對應過程如圖所示：

所以想要阻止不同時間段的冒泡行為，對應使用不同的方法，對應如下：

• 阻止合成事件間的冒泡，用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,    });   });  
} 

三、總結

React事件機制總結如下：

• React 上注冊的事件最終會綁定在document這個 DOM 上，而不是 React 組件對應的 DOM(減少內存開銷就是因為所有的事件都綁定在 document 上，其他節點沒有綁定事件)
• React 自身實現了一套事件冒泡機制，所以這也就是為什么我們 event.stopPropagation()無效的原因。
• React 通過隊列的形式，從觸發的組件向父組件回溯，然后調用他們 JSX 中定義的 callback
• React 有一套自己的合成事件 SyntheticEvent

參考文獻

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