React基于虚拟DOM实现了一个合成事件层，我们所定义的事件处理器会接受到一个合成事件层对象的实例，它完全符合W3C标准，不会存在任何IE标准的兼容性问题。并且和原生的浏览器事件一样拥有同样的接口，同样支持事件的冒泡机制。所有事件都自动绑定到最外层上。

  • 合成事件的实现机制
    React不会把事件处理函数直接绑定到真实的节点上。而是把所有事件绑定到结构的最外层，使用一个统一的事件监听器，这个事件监听器维持了一个映射保存所有组件内部的事件监听和处理函数。当有事件发生的时候，首先由这个事件监听器处理，然后事件监听器在映射里面找到真正的事件处理函数并调用。这样做简化了事件处理和回收机制，效率很大的提升了。

在React中使用DOM原生事件时，一定要在组件卸载的时候，手动移除，否则可能会出现内存泄漏的问题，而在使用合成事件系统的时候，则不需要，因为React内部已经帮你妥善处理好这些问题了。

虽然合成事件能够解决内存泄漏的问题，但是在某些情况下，还是必须使用原生的事件才能实现。不要讲合成事件和原生事件混用，但是也可以通过e.target判断来避免。实际上，React的合成事件系统只是原生DOM事件系统的一个子集

React事件系统入门的更多相关文章

  1. React.js入门笔记

    # React.js入门笔记 核心提示 这是本人学习react.js的第一篇入门笔记,估计也会是该系列涵盖内容最多的笔记,主要内容来自英文官方文档的快速上手部分和阮一峰博客教程.当然,还有我自己尝试的 ...

  2. 基于Nodejs生态圈的TypeScript+React开发入门教程

    基于Nodejs生态圈的TypeScript+React开发入门教程   概述 本教程旨在为基于Nodejs npm生态圈的前端程序开发提供入门讲解. Nodejs是什么 Nodejs是一个高性能Ja ...

  3. 【转载】React初学者入门须知

    http://www.oschina.net/news/75530/9-things-every-reactjs-beginner-should-know react.js入门学习 看了一遍,没什么特 ...

  4. React Native入门教程 3 -- Flex布局

    上一篇文章中介绍了基本组件的使用 React Native入门教程(笔记) 2 – 基本组件使用及样式 本节内容将继续沿用facebook官方例子介绍如何使用Flexbox布局把界面设计的多样化. 转 ...

  5. React Native入门教程2 -- 基本组件使用及样式

    在上一篇文章中,我们学会了如何搭建React Native的环境(React Native入门教程(笔记) 1 – 开发环境搭建),不知道你们是否搭建好了呢,如果还没有,那么快动起小手,来体验RN带给 ...

  6. React Native入门教程 1 -- 开发环境搭建

    有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...

  7. React Native 入门基础知识总结

    中秋在家闲得无事,想着做点啥,后来想想,为啥不学学 react native.在学习 React Native 时, 需要对前端(HTML,CSS,JavaScript)知识有所了解.对于JS,可以看 ...

  8. React.js 入门与实战课程思维导图

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,在这里分享了课程中的思维导图,供大家参考. 原文发表于我的技术博客 此导图为课程 ...

  9. React.js 入门与实战之开发适配PC端及移动端新闻头条平台课程上线了

    原文发表于我的技术博客 我在慕课网的「React.js 入门与实战之开发适配PC端及移动端新闻头条平台」课程已经上线了,文章中是目前整个课程的大纲,以后此课程还会保持持续更新,此大纲文档也会保持更新, ...

随机推荐

  1. tex src

    https://github.com/jepsonr/Text-Exercises https://github.com/Khan/KaTeX https://github.com/goldsboro ...

  2. xmlns:xsi=”http://www.w3.org/2001/XMLSchema-instance(xsi:schemaLocation详解)

    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"中xsi的意思是 :本xml文件中要用到某些来自xsi代表的“http:/ ...

  3. PIL处理图片信息

    最近遇到了图片处理的一些问题,python提供了一些库可以很方便地帮助我们解决这些问题,在这里把我这几天的学习总结一下. 一.提取图片的RGB值 1.非代码:如果只是为了提取某张图片或者某个像素点的R ...

  4. node起server--axios做前端请求----进行CORS--跨域请求

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing). 它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从 ...

  5. [Jsoi2011]柠檬

    Description Flute 很喜欢柠檬.它准备了一串用树枝串起来的贝壳,打算用一种魔法把贝壳变成柠檬.贝壳一共有 N (1 ≤ N ≤ 100,000) 只,按顺序串在树枝上.为了方便,我们从 ...

  6. java中的抽象方法与抽象类

    在继承时,会遇到一个问题.如果很多子类都要继承父类的一个方法,但是实现的逻辑都不一样. 这时候父类只提供了方法名,但是没有具体的方法体. 例如,男孩类和女孩类都继承人类这一个父类.人类有爱好这个方法, ...

  7. django 上传图片、使用PIL制作缩略图并保存到sea的storage

    上传图片解析: SAE的设置指引如下: 处理用户上传文件 在setttings.py中添加以下配置. # 修改上传时文件在内存中可以存放的最大size为10m FILE_UPLOAD_MAX_MEMO ...

  8. H5游戏开发：贪吃蛇

    贪吃蛇的经典玩法有两种: 积分闯关 一吃到底 第一种是笔者小时候在掌上游戏机最先体验到的(不小心暴露了年龄),具体玩法是蛇吃完一定数量的食物后就通关,通关后速度会加快:第二种是诺基亚在1997年在其自 ...

  9. 查找文件which locate find

    (1)which:查找命令文件路径 which ls //命令的路径查找是根据PATH环境变量 whereis ls echo $PATH //打印PATH环境变量 (2)locate:查找任意文件 ...

  10. JSTL 1.1与JSTL 1.2之间的区别？如何下载JSTL 1.2?

    JSTL 1.1与JSTL 1.2之间的区别?如何下载JSTL 1.2? JSTL 1.2中不要求standard.jar架包 您可以在Maven中央仓库中找到它们: http://repo2.mav ...