日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

[[408242]]

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

一、是什么

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

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

合成事件(SyntheticEvent)

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

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

 
 
 
 

  
  
  
  
const button = 按鈕 
 
 
 
 

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

 
 
 
 

  
  
  
  
const handleClick = (e) => console.log(e.nativeEvent);; 
  
  
  
  
const button = 按鈕 
 
 
 
 

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

• 事件名稱命名方式不同

 
 
 
 

  
  
  
  
// 原生事件綁定方式 
  
  
  
  
按鈕命名 
  
  
  
  
       
  
  
  
  
// React 合成事件綁定方式 
  
  
  
  
const button = 按鈕命名 
 
 
 
 

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

 
 
 
 

  
  
  
  
// 原生事件 事件處理函數(shù)寫法 
  
  
  
  
按鈕命名 
  
  
  
  
       
  
  
  
  
// React 合成事件 事件處理函數(shù)寫法 
  
  
  
  
const button = 按鈕命名 
 
 
 
 

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

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

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

二、執(zhí)行順序

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

 
 
 
 

  
  
  
  
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 ( 
  
  
  
  
       
  
  
  
  
         
  
  
  
  
          分析事件執(zhí)行順序