博主最近在學習React事件綁定時偏灿，發(fā)現(xiàn)React綁定時間有其自身的一套機制，那就是合成事件钝的。
先看源碼：
<div className="testDom" onClick={this.testDomClick()}><div>
React合成事件和原生事件區(qū)別
React合成事件一套機制：React并不是將click事件直接綁定在dom上面翁垂，而是采用事件冒泡的形式冒泡到document上面，然后React將事件封裝給正式的函數(shù)處理運行和處理硝桩。
React合成事件理解
如果DOM上綁定了過多的事件處理函數(shù)沿猜，整個頁面響應以及內(nèi)存占用可能都會受到影響。React為了避免這類DOM事件濫用碗脊，同時屏蔽底層不同瀏覽器之間的事件系統(tǒng)差異邢疙，實現(xiàn)了一個中間層——SyntheticEvent。
- 當用戶在為onClick添加函數(shù)時望薄，React并沒有將Click時間綁定在DOM上面。
- 而是在document處監(jiān)聽所有支持的事件呼畸，當事件發(fā)生并冒泡至document處時痕支，React將事件內(nèi)容封裝交給中間層SyntheticEvent（負責所有事件合成）
- 所以當事件觸發(fā)的時候，對使用統(tǒng)一的分發(fā)函數(shù)dispatchEvent將指定函數(shù)執(zhí)行蛮原。
React真正處理合成事件過程卧须，可以具體可以參考相關的源碼解析：React源碼解讀系列 – 事件機制
以下用代碼來展示兩者的區(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()}>點擊</button>
</div>
}
}
結果：
Dom click
React click
可以看待原生綁定快于合成事件綁定。
注意點：
- 不要將原生事件（addEventListener）和React合成事件一起混合使用儒陨，這兩個機制是不一樣的花嘶。
如果覺得這個理解合適的話，大家可以點個紅心蹦漠，謝謝椭员。
