React -- 事件系统
来源:互联网 发布:mac电脑numbers教程 编辑:程序博客网 时间:2024/06/05 02:06
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、自动绑定
(待续)
0 0
- react 事件系统
- React -- 事件系统
- React学习 -- 事件系统
- React事件系统入门
- React源码分析7 — React合成事件系统
- React事件
- react事件
- React学习之高级事件系统(二十七)
- React-事件处理详解
- React-事件处理详解
- React Native中的事件
- react中的事件
- React事件代理
- React动态添加事件
- 窥探react事件
- react 事件 (笔记)
- React-native事件处理
- react 之 事件处理
- boost::function用法详解(一)
- HDOJ 2014 青年歌手大奖赛_评委会打分
- iOS开发中添加PrefixHeader.pch
- jQuery获取textarea文本域的值
- 例解 Linux 下 Make 命令
- React -- 事件系统
- 论#POST异步加载的tab切换内容 swiper切换不起效果以及底部pagination 失效的解决办法#
- 【python图像处理】图像的增强(ImageEnhance类详解)
- office 图片插入题注,页眉
- group by 排序问题
- ElasticSearch--停用词的使用
- linux,对根目录进行扩充(lvm)
- react-native tab标签
- 皇后问题 搜索