React -- 事件系统

前端之家收集整理的这篇文章主要介绍了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、自动绑定

(待续)

原文链接:https://www.f2er.com/react/304095.html

猜你在找的React相关文章