原生事件
概念
直接绑定到DOM元素上的用户事件（如点击，鼠标划过等等）
合成事件
概念
React中封装事件处理的一套机制，React合成事件一套机制：React并不是将click事件直接绑定在dom上面，而是采用事件冒泡的形式冒泡到document上面，然后React将事件封装给正式的函数处理运行和处理。避免了DOM原生事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异。
如果DOM上绑定了过多的事件处理函数，整个页面响应以及内存占用可能都会受到影响。React为了避免这类DOM事件滥用，同时屏蔽底层不同浏览器之间的事件系统差异，实现了一个中间层——SyntheticEvent。
- 当用户在为onClick添加函数时，React并没有将Click时间绑定在DOM上面。`
- 而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装交给中间层SyntheticEvent（负责所有事件合成）
- 所以当事件触发的时候，对使用统一的分发函数dispatchEvent将指定函数执行。` [上段原文来源](www.jianshu.com/p/8d8f9aa4b…)
上面的流程可以理解为：
React所有事件都挂载到document对象上；
当真实DOM元素触发事件，会冒泡到document对象后，在处理React事件；
所以会先执行原生事件，然后处理React事件；
最后真正执行document上挂载的事件。
结构
document事件
⬆️
React事件
⬆️
原生事件
- 特点
- React 上注册的事件最终会绑定到document上，结合对象池机制管理合成事件对象，减少内存消耗，达到性能优化的目的；
合成事件不会注册到原生事件上，但最终会绑定在document上面，所以不会在原生事件触发的时候触发
- 事件对象是合成事件对象（Synthetic Event），而不是原生的事件对象。
- 区别
class Test extends Component {
constructor() {
super(arguments);
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
[代码来源](www.jianshu.com/p/8d8f9aa4b…)
注意
- 勿将原生事件（addEventListener）和React合成事件混用，二者机制不同。
