react合成事件与原生事件的相关理解

1. 原生事件

原生事件就是js的原生事件，如通过document.addEventListener来设置的监听事件。

在react中即使有自己的一套事件机制（见狼蚁网站SEO优化合成事件），但有时候的业务场景我们仍然需要使用原生事件。比如我们封装一个Modal弹窗组件，需要在点击非弹窗区域时关掉弹窗，此时我们只能针对document进行原生点击事件监听。

由于原生事件需要绑定在真实DOM上，所以一般是在componentDidMount阶段或者组件/元素的ref的函数执行阶段进行绑定操作，并且注意要在componentWillUnmount阶段进行解绑操作以避免内存泄漏。

2. 合成事件

React有自己的一套事件机制,它重新封装了绝大部分的原生事件。合成事件采用了事件池，这样做可以大大节省内存，而不会频繁的创建和销毁事件对象。

在React中，如果需要绑定事件，我们常常在jsx中这么写：

handleClick(){
}
<div onClick={this.handleClick.bind(this)}>
	react事件
</div>

大致原理：

React并不是将click事件绑在该div的真实DOM上，而是在document处监听所有支持的事件，当事件发生并冒泡至document处时，React将事件内容封装并交由真正的处理函数运行。

以上面的代码为例，整个事件生命周期示意如下：

合成事件的一些特点总结：

• React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少内存开销就是因为所有的事件都绑定在 document 上，其他节点没有绑定事件)
• React 通过队列的形式，从触发的组件向父组件回溯，然后调用他们 JSX 中定义的 callback
• React 通过对象池的形式管理合成事件对象的创建和销毁，减少了垃圾的生成和新对象内存的分配，提高了性能
  

了解react合成事件的大概原理后，方便我们解答狼蚁网站SEO优化一个问题：

为什么react事件需要手动绑定this

合成事件触发之后会冒泡一路到document的节点，然后开始分发document节点收集到的事件，这个时候react从事件触发的组件实例开始， 遍历虚拟dom树，从树上取下我们绑定的事件，收集起来，然后执行。举个例子：

class Test extends React.Component {
   fatherHandler =  function father() { /*...*