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

最新推荐文章于 2025-11-06 09:49:20 发布
最新推荐文章于 2025-11-06 09:49:20 发布
阅读量1.2w 收藏 12
点赞数 7
CC 4.0 BY-SA版权
分类专栏： 移动开发：前端、后端、Android 文章标签： react 事件 源码 SyntheticE
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013510838/article/details/61224760
本文深入解析React的合成事件系统，包括事件注册在document节点、事件分发与callback调用机制，以及如何通过SyntheticEvent优化性能。通过对React事件源码的分析，阐述了React事件系统的内存效率和兼容性优势。

1 React合成事件特点

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

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

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

2 React事件系统

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

Markdown

浏览器事件（如用户点击了某个button）触发后，DOM将

了解本专栏 订阅专栏 解锁全文 超级会员免费看
React源码分析1 -- 框架
谢杨易的博客
02-18 2万+
1 源码结构我们分析的React源码version为16.0.0-alpha.3，源码目录如下图所示。含义如下 addons：插件，一些比较有用的工具，如transition动画 isomorphic: 同构，服务端在页面初次加载时，将所有方法渲染好，一次性交给客户端。这样可以减少Ajax shared: 共用方法，一些utils test: 测试方法 renderers: React代码核心，大部...
React系列 之 React进阶 含源码解读 （一）事件合成、state原理
咕咕酱没有悲伤的博客
03-23 852
资料来源：掘金课程 https://juejin.cn/book/6945998773818490884?记录一些笔记。
React源码解读之更新的创建
weixin_59558923的博客
10-03 515
React的鲜活生命起源于，这个过程会为它的一生储备好很多必需品，我们顺着这个线索，一探婴儿般React应用诞生之初的悦然。更新创建的操作我们总结为以下两种场景。
React合成事件
最新发布
YSbnhoffer的博客
11-06 780
React的合成事件(SyntheticEvent)是一个跨浏览器统一的事件系统，它基于原生DOM事件构建，通过封装不同浏览器的事件实现差异，为开发者提供一致的事件处理接口。合成事件具有三大核心特点：跨浏览器一致性、事件池化复用机制和统一的事件API。相比原生事件，合成事件通过自动管理事件绑定、事件委托机制和对象池化等技术，显著提升了开发效率和应用性能。其优势在于简化兼容性处理、优化内存使用并增强应用稳定性，是React事件系统的关键技术。
深度分析React源码中的合成事件
It_kc的博客
10-31 305
说是讲React的合成事件，实际上讲了React的事件系统。React的事件系统分为几个部分：事件注册；事件监听；事件合成；事件派发；事件系统流程：在React代码执行时，内部会自动执行事件的注册；第一次渲染，创建fiberRoot时，会进行事件的监听，所有的事件通过委托在id=root的DOM元素上进行监听；在我们触发事件时，会进行事件合成，同类型事件复用一个合成事件类实例对象；最后进行事件的派发，执行我们代码中的事件回调函数；当然，由于篇幅问题，这里也是对React。
React源码剖析：手写React合成事件机制
qq_44746132的博客
05-18 391
之前剖析过Vue中的AST的实现和DOM DIFF的实现。这里来到React,说说React的事件机制 在看React源码之前，我一直认为React中的事件实现和原生的事件绑定差别不大，但是真正阅读源码后，发现和我最初的想法是大相径庭的：React采用合成事件，所谓的合成事件，简单来说就是React中的事件绑定是被React框架处理过的，它将事件的绑定作用在document对象上，类似事件代理的模式，同时劫持了事件对象，做了一层封装优化，也即是syntheticEvent，当然这里也就会出现了React中
【React源码】(十六)React 合成事件
weixin_44828588的博客
08-26 479
从架构上来讲,打通了从外部原生事件到内部fiber树的交互渠道, 使得react能够感知到浏览器提供的原生事件, 进而做出不同的响应, 修改fiber树, 变更视图等.监听原生事件: 对齐DOM元素和fiber元素收集listeners: 遍历fiber树, 收集所有监听本事件的listener函数.派发合成事件: 构造合成事件, 遍历listeners进行派发....
React 源码揭秘 | 合成事件
weixin_40710412的博客
10-09 649
React合成事件通过事件委托机制统一处理浏览器事件差异。在container节点上统一绑定事件监听，收集从触发节点到container路径上的所有处理函数，模拟捕获和冒泡阶段。通过MonkeyPatch扩展stopPropagation控制事件传播，并引入优先级调度机制（如click为立即执行优先级，scroll为普通优先级），确保高优先级事件优先处理。这种设计解决了浏览器兼容性问题，优化了事件处理性能，实现了更可控的事件流管理。
react 八千字长文深入了解react合成事件底层原理，原生事件中阻止冒泡是否会阻塞合成事件？
行星飞行的博客
07-06 793
在前面两篇文章中，我们花了较大的篇幅介绍的方法，在介绍同步异步时提到，在合成事件中对于更新都是异步，但在原生事件中更新却是同步，这说明在合成事件处理上必定与原生事件存在部分差异，那么本篇文章就来着重介绍中的合成事件，在文章开始之前我们先罗列部分问题：在文章开始前，大家可以先自行思考这些问题，假设这些在面试中遇到，你能回答多少呢？那么本文开始。虽然本文的核心重点是介绍的合成事件，但文章开头既然给了合成事件与原生事件相关对比问题，因此了解原生事件是有必要的，考虑到可能有同学对此类知识存在遗忘，这里做个简单复习。
react-原生事件和合成事件的区别
小小小的骆驼的前端技术博客
07-18 2602
react-原生事件和合成事件的区别及源码分析 概念 class EventClickDemo extends React.Component { constructor(props) { super(props) this.btnRef = React.createRef() } componentDidMount() { // 这里就是js原生事件 this.btnRef.current.addEventListener('click', function(e) { cons
React 合成事件的事件系统
qq_42540666的博客
08-02 136
React 合成事件的事件系统 主要包括 3 个步骤 事件注册 事件存储 事件执行 在事件注册中 React 首先在组件创建和更新的时候，获取到对应的绑定的事件，然后将所有获取的事件注册到到 document 这个对象上,(即 document.addEventListener(‘事件名’, callback, false)，其中 callback 以 ReactEventListener.dispatchEvent.bind()形式绑定)。并通过事务队列 transaction 的方式，将注册的事件存
React之事件机制源码解析
编译的阿喵
12-26 1119
定义 事件委托机制：并不是将Click事件绑定在DOM上，而是采用事件冒泡的形式冒泡到document上，然后将React事件内容封装并交真正的函数处理 合成事件SyntheticEvent：冒泡到document上的事件也不是原生的浏览器事件，而是由react实现的合成事件SyntheticEvent。 ⚠️ 如果不想要事件冒泡的话应该调用event.preventDefault()方法，而不是event.stopProppagation(),event.stopProppagation() 只
探索 JavaScript 事件机制（四）：React 合成事件系统
乐闻世界
10-24 1676
在前端开发中，事件处理是不可或缺的一部分。在众多的前端框架中，React 凭借其高效和灵活性受到众多开发者的喜爱。React 的事件处理系统，即“合成事件系统”，是其性能优化的一大亮点。本文将带你深入浅出地探索 React 的合成事件系统，了解其原理和优势。React 的合成事件系统（Synthetic Event System）是对浏览器原生事件的封装和优化。它不仅统一了不同浏览器的事件模型，还提供了更高效的事件处理机制。通过合成事件，React 可以实现更好的性能和跨浏览器兼容性。
React事件源码分析
XCY11261的博客
04-22 205
合成事件包装了每一个react事件重写了浏览器的事件方法让每一个不通种类的浏览器都有相同的事件效果,全部使用top+method方法,在reactbrowsereventlistener->eventlistener里做逻辑区分: ...
React系列之合成事件与事件处理机制
cherry__yu的博客
03-28 2175
即在react中，我们绑定的事件onClick等，并不是原生事件，而是由原生事件合成的React事件，比如 click 事件合成为 onClick 事件。react 的所有事件并没有绑定到具体的dom节点上而是绑定在了 document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。react 事件机制基本理解：react 基于浏览器的事件机制，自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等。
细说react源码中的合成事件
weixin_59558923的博客
10-03 370
原生事件: 在。
从 Vue 到 React：React 合成事件
Curry_On的博客
04-26 1409
合成事件（Synthetic Event）是 React 自己实现的一套事件系统，模拟了浏览器原生 DOM 事件的所有能力，同时统一了不同浏览器的兼容性差异。所以，React 不是直接在真实 DOM 上绑定原生事件，而是拦截浏览器事件，自己封装了一套虚拟事件对象，统一管理和派发。这就是所谓的Synthetic（合成）。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

谢杨易

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值