React 并不會把所有的處理函數(shù)直接綁定在真實的節(jié)點上。而是把所有的事件綁定到結(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)用。

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

在React@17.0.3版本中：

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

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

• 使用 on 方法來綁定事件監(jiān)聽器：

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 方法被綁定到父級 div 元素的 onClick 事件上。當(dāng)點擊 button 元素時，事件會冒泡到父級 div 元素，從而觸發(fā) handleClick 方法。然后可以通過 event.target 來判斷點擊的元素是否是 button 元素。

• 使用條件渲染來為不同的元素綁定不同的事件：

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>
    );
  }
}

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

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

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

最新評論