废话不多说，直接上脚本

本文主要通过OutLine和思维导图的方式展现React中事件注册的流程。

一般来说，我们想要去学习 React 的源码的时候，可能会先Build一下，然后使用源码包下的fixtures
内的测试样例进行调试，但是，不管是production的build还是Development的build
，源码都是被打包在一个文件中的，结构混乱，即使代码没有被压缩，也很难看得懂具体那一个方法是属于哪一个模块的。所以，为何不使用源码包直接来调试源代码呢？

本文将会介绍如何直接使用React源码包来调试源码。

相关代码以全部放置在:

https://gitee.com/cyrusky/StudyReact.git

数据的单向绑定

我们在做原生页面开发的时候，如果涉及到前端的数据动态展现，是如何做的呢？（这里排除了后端直接返回嵌入数据的HTML
页面的模式，比如说PHP中的模式），比如下面的例子：

1

<p></p>

1
2

const data = { value: 'hello' }
document.querySelector('p').innerText = data.value;

通过 JavaScript 原生的DOM操作方式，将数据动态填充到DOM中，就是数据（Data）到模板（DOM）的绑定，这就是数据单向绑定。

事件冒泡与事件捕获

事件冒泡和事件捕获分别由微软和网景公司提出，这两个概念都是为了解决页面中事件流（事件发生顺序）的问题。

比如说，下面的代码：

1
2
3
4

<div id="outer">
    <p id="inner">Click me!</p>
</div>

上面的代码当中一个div元素当中有一个p子元素，如果两个元素都有一个click的处理函数，如果点击了inner的话，其实outer
也算是被点击了的。那么我们怎么才能知道哪一个函数会首先被触发呢？为了解决这个问题微软和网景提出了两种几乎完全相反的概念。