1 React合成事件特点

React自己实现了一套高效的事件注册，存储，分发和重用逻辑，在DOM事件体系基础上做了很大改进，减少了内存消耗，简化了事件逻辑，并最大化的解决了IE等浏览器的不兼容问题。与DOM事件体系相比，它有如下特点

React组件上声明的事件最终绑定到了document这个DOM节点上，而不是React组件对应的DOM节点。故只有document这个节点上面才绑定了DOM原生事件，其他节点没有绑定事件。这样简化了DOM原生事件，减少了内存开销
React以队列的方式，从触发事件的组件向父组件回溯，调用它们在JSX中声明的callback。也就是React自身实现了一套事件冒泡机制。我们没办法用event.stopPropagation()来停止事件传播，应该使用event.preventDefault()
React有一套自己的合成事件SyntheticEvent，不同类型的事件会构造不同的SyntheticEvent
React使用对象池来管理合成事件对象的创建和销毁，这样减少了垃圾的生成和新对象内存的分配，大大提高了性能

那么这些特性是如何实现的呢，下面和大家一起一探究竟。

2 React事件系统

先看Facebook给出的React事件系统框图

浏览器事件（如用户点击了某个button）触发后，DOM将event传给ReactEventListener，它将事件分发到当前组件及以上的父组件。然后由ReactEventEm

React源码分析7 — React合成事件系统相关推荐

react源码分析-setState分析
前言是否有过这样的疑问: setState做了什么? setState是如何触发ui变化的? isWorking 如果此时isWorking为true,react将不会立即执行更新操作,而是把更新操 ...
推荐一个 React 技术揭秘的项目，自顶向下的 React 源码分析
大家好,我是你们的猫哥,那个不喜欢吃鱼.又不喜欢喵的超级猫 ~ just-react 这本书的宗旨是打造一本严谨.易懂的 React 源码分析教程. 为了达到这个目标,在行文上,本书会遵循: 不预 ...
窥探React - 源码分析
所谓知其然还要知其所以然. 本文将分析 React 15-stable的部分源码, 包括组件初始渲染的过程和组件更新的过程.在这之前, 假设读者已经: 对React有一定了解知道React elem ...
React源码分析（二）= Reac初次渲染分析
文章目录 1. render阶段 legacyRenderSubtreeIntoContainer 1.1. legacyCreateRootFromDOMContainer 1.1.1. React ...
React源码分析（一）= scheduler分析
文章目录 1. 前言 2. getCurrentTime 3. unstable_scheduleCallback函数 4. scheduleHostCallbackIfNeeded 4.1. flu ...
React源码分析与实现(一)：组件的初始化与渲染
原文链接地址:github.com/Nealyang 转载请注明出处前言战战兢兢写下开篇...也感谢小蘑菇大神以及网上各路大神的博客资料参考~ 阅读源码的方式有很多种,广度优先法.调用栈调试法等等 ...
React源码解读之React Fiber
开始之前,先讲一下该文章能帮你解决哪些问题? 开始之前,先讲一下该文章能帮你解决哪些问题? facebook为什么要使用重构React React Fiber是什么 React Fiber的核心算法 ...
react源码分析：深度理解React.Context
开篇在 React 中提供了一种「数据管理」机制:React.context,大家可能对它比较陌生,日常开发直接使用它的场景也并不多. 但提起 react-redux 通过 Provider 将 s ...
React源码分析2 — 组件和对象的创建（createClass，createElement）
1 组件的创建 React受大家欢迎的一个重要原因就是可以自定义组件.这样的一方面可以复用开发好的组件,实现一处开发,处处调用,另外也能使用别人开发好的组件,提高封装性.另一方面使得代码结构很清晰,组 ...

React源码分析7 — React合成事件系统

1 React合成事件特点

2 React事件系统

React源码分析7 — React合成事件系统相关推荐

最新文章

热门文章