必要的知识概念

在弄清楚react事件之前，有几个概念我们必须弄清楚，因为只有弄明白这几个概念，在事件触发阶段，我们才能更好的理解react处理事件本质。

我们写在JSX事件终将变成什么?

我们先写一段含有点击事件的react JSX语法，看一下它最终会变成什么样子?

1. class Index extends React.Component{ 
2.     handerClick= (value) => console.log(value)  
3.     render(){ 
4.         return <div> 
5.             <button onClick={ this.handerClick } > 按钮点击 </button> 
6.         </div> 
7.     } 
8. } 

经过babel转换成React.createElement形式，如下：

fiber对象上的memoizedProps 和 pendingProps保存了我们的事件。

什么是合成事件?

通过上一步我们看到了，我们声明事件保存的位置。但是事件有没有被真正的注册呢?我们接下来看一下：

我们看一下当前这个元素<button>上有没有绑定这个事件监听器呢？