React -- 事件系统

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、自动绑定

(待续)

相关文章

一、前言 在组件方面react和Vue一样的,核心思想玩的就是组件...
前言: 前段时间学习完react后,刚好就接到公司一个react项目...
前言: 最近收到组长通知我们项目组后面新开的项目准备统一技...
react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom...