React 并不會(huì)把所有的處理函數(shù)直接綁定在真實(shí)的節(jié)點(diǎn)上。而是把所有的事件綁定到結(jié)構(gòu)的最外層，使用一個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器，這個(gè)事件監(jiān)聽(tīng)器上維持了一個(gè)映射來(lái)保存所有組件內(nèi)部的事件監(jiān)聽(tīng)和處理函數(shù)。

當(dāng)組件掛載或卸載時(shí)，只是在這個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器上插入或刪除一些對(duì)象。

當(dāng)事件發(fā)生時(shí)，首先被這個(gè)統(tǒng)一的事件監(jiān)聽(tīng)器處理，然后在映射里找到真正的事件處理函數(shù)并調(diào)用。

這樣做的優(yōu)點(diǎn)是解決了兼容性問(wèn)題，并且簡(jiǎn)化了事件處理和回收機(jī)制（不需要手動(dòng)的解綁事件，React 已經(jīng)在內(nèi)部處理了）。但是有些事件 React 并沒(méi)有實(shí)現(xiàn)，比如 window 的 resize 事件。

在React@17.0.3版本中：

• 所有事件都是委托在id = root的DOM元素中（網(wǎng)上很多說(shuō)是在document中，17版本不是了）；
• 在應(yīng)用中所有節(jié)點(diǎn)的事件監(jiān)聽(tīng)其實(shí)都是在id = root的DOM元素中觸發(fā)；
• React自身實(shí)現(xiàn)了一套事件冒泡捕獲機(jī)制；
• React實(shí)現(xiàn)了合成事件SyntheticEvent；
• React在17版本不再使用事件池了（網(wǎng)上很多說(shuō)使用了對(duì)象池來(lái)管理合成事件對(duì)象的創(chuàng)建銷(xiāo)毀，那是16版本及之前）；
• 事件一旦在id = root的DOM元素中委托，其實(shí)是一直在觸發(fā)的，只是沒(méi)有綁定對(duì)應(yīng)的回調(diào)函數(shù)；

在 React 組件中使用事件代理可以使用以下方法：

• 使用 on 方法來(lái)綁定事件監(jiān)聽(tīng)器：

class MyComponent extends React.Component {
  handleClick(event) {
    if (event.target.tagName === 'BUTTON') {
      console.log('Button clicked');
    }
  }

  render() {
    return (
      <div onClick={this.handleClick}>
        <button>Click me</button>
      </div>
    );
  }
}

在上述例子中，handleClick 方法被綁定到父級(jí) div 元素的 onClick 事件上。當(dāng)點(diǎn)擊 button 元素時(shí)，事件會(huì)冒泡到父級(jí) div 元素，從而觸發(fā) handleClick 方法。然后可以通過(guò) event.target 來(lái)判斷點(diǎn)擊的元素是否是 button 元素。

• 使用條件渲染來(lái)為不同的元素綁定不同的事件：

class MyComponent extends React.Component {
  handleClick(buttonType) {
    console.log(`${buttonType} clicked`);
  }

  render() {
    return (
      <div>
        <button onClick={() => this.handleClick('Button 1')}>Button 1</button>
        <button onClick={() => this.handleClick('Button 2')}>Button 2</button>
      </div>
    );
  }
}

在上述例子中，通過(guò)使用箭頭函數(shù)，在每個(gè) button 元素的 onClick 屬性中調(diào)用不同的 handleClick 方法，并傳遞不同的參數(shù)。

這些方法都是使用了 React 的事件委托機(jī)制，利用事件冒泡原理來(lái)實(shí)現(xiàn)事件代理。這樣可以減少事件監(jiān)聽(tīng)器的數(shù)量，并且提高性能。

到此這篇關(guān)于React 組件中實(shí)現(xiàn)事件代理的文章就介紹到這了,更多相關(guān)React 事件代理內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論