React 中的虚拟DOM是在内存中以对象的形式存在的,因此,在对象上添加事件,就会非常容易。
React给予Virtual DOM实现了一个SyntheticEvent合成事件层,我们所定义的事件处理器会接收到一个SyntheticEvent对象的实例。
合成事件的绑定方式
React事件绑定方式在写法上与原生的HTML事件监听器的属性非常相似,并且含义和处罚的场景也都一致。
例如:
<button onClick={this.handleClick}>Test</button>
仔细观察,我们会发现React的事件写法和DOM0级实践中直接设置HTML标签属性为事件处理器的做法还是有区别的:
1、使用驼峰命名法onClick而不是HTML的onclick
2、props的值可以是任意的,而在HTML中只能是JS代码字符串:onclick=”handleClick()”
虽然在写法上大同小异,但是React并不会像DOM0那样,将事件处理器直接绑定到HTML元素上。React仅仅是借鉴了这种写法,易于开发者使用。
合成事件的实现机制
在React底层,主要对合成事件做了两件事:事件委派和自动绑定。
1、事件委派
React采用了事件代理机制:不会把事件处理函数直接绑定在真实的节点上,而是把左右节点绑定在结构最外层,使用一个统一的事件监听器,这个监听器维持了一个映射,来保存所有组件内部的事件监听和处理函数。
当组件挂载或卸载时,只是在这个同意的事件监听器上插入或者删除对象。当事件发生时,首先被这个同意的事件监听器处理,然后在映射里找到真正的事件处理函数并调用。
2、自动绑定
(待续)