博主最近在學(xué)習(xí)React事件綁定時(shí)，發(fā)現(xiàn)React綁定時(shí)間有其自身的一套機(jī)制，那就是合成事件。
先看源碼：

<div className="testDom" onClick={this.testDomClick()}><div>

React合成事件和原生事件區(qū)別

React合成事件一套機(jī)制：React并不是將click事件直接綁定在dom上面，而是采用事件冒泡的形式冒泡到document上面，然后React將事件封裝給正式的函數(shù)處理運(yùn)行和處理。

React合成事件理解

如果DOM上綁定了過(guò)多的事件處理函數(shù)，整個(gè)頁(yè)面響應(yīng)以及內(nèi)存占用可能都會(huì)受到影響。React為了避免這類DOM事件濫用，同時(shí)屏蔽底層不同瀏覽器之間的事件系統(tǒng)差異，實(shí)現(xiàn)了一個(gè)中間層——SyntheticEvent。

1. 當(dāng)用戶在為onClick添加函數(shù)時(shí)，React并沒(méi)有將Click時(shí)間綁定在DOM上面。
2. 而是在document處監(jiān)聽(tīng)所有支持的事件，當(dāng)事件發(fā)生并冒泡至document處時(shí)，React將事件內(nèi)容封裝交給中間層SyntheticEvent（負(fù)責(zé)所有事件合成）
3. 所以當(dāng)事件觸發(fā)的時(shí)候，對(duì)使用統(tǒng)一的分發(fā)函數(shù)dispatchEvent將指定函數(shù)執(zhí)行。

React真正處理合成事件過(guò)程，可以具體可以參考相關(guān)的源碼解析：React源碼解讀系列 – 事件機(jī)制

以下用代碼來(lái)展示兩者的區(qū)別：

class Test extends Component {
    constructor(props) {
        super(props);
        this.onReactClick.bind(this);
    }
    componentDidMount() {
        const parentDom = ReactDOM.findDOMNode(this);
        const childrenDom = parentDom.queneSelector('.button');
        childrenDom.addEventListen('click', this.onDomClick, false);
    }
    onDomClick() {  // 事件委托
        console.log('Javascript Dom click');
    }
    onReactClick() {  // react合成事件
        console.log('React click');
    }
    render() {
        <div>
            <button className="button" onClick={this.onReactClick()}>點(diǎn)擊</button>
        </div>
    }
}

結(jié)果：

Dom click
React click

可以看待原生綁定快于合成事件綁定。

注意點(diǎn)：

1. 不要將原生事件（addEventListener）和React合成事件一起混合使用，這兩個(gè)機(jī)制是不一樣的。

參考:React合成事件和DOM原生事件混用須知

如果覺(jué)得這個(gè)理解合適的話，大家可以點(diǎn)個(gè)紅心，謝謝。