首页 > 其他分享 >react的合成事件

react的合成事件

时间:2023-02-01 14:33:49浏览次数:34  
标签:冒泡 合成 绑定 react 内存 事件

react自己有一套自己的事件机制,它在DOM事件体系基础上做了改进,减少了内存消耗,并且最大程度的消除了ie等浏览器的不兼容问题。
它的特点有以下几个:
react上注册的事件最终会绑定到document上,而不是react组件对应的dom(减少内存开销,因为所有的事件都绑定在document上,其他节点没有绑定事件)。(react17后绑定在渲染react树的根节点上)。
react自身实现了一套事件冒泡机制,所以在事件上使用event.stopPropagation()(阻止冒泡)无效。
react通过队列的形式,从触发的组件向父组件回溯,然后调用他们JSX中的callBack。
react通过对象池的形式管理合成事件对象的创建和销毁,减少了垃圾的生成和新对象内存的分配,提高了性能。

原因:
抹平不同浏览器之间的差异,更便于跨平台。
事件合成可以处理兼容性问题。
利用事件委托机制,支持动态绑定,简化了DOM事件处理逻辑,减少了内存开销。
React16引入fiber结构(类似于树的双向链表),React可以通过干预事件的分发以优化用户的交互体验

与原生事件的不同:

  1. 合成事件的监听器是统一注册在document上的,并且仅有冒泡阶段,所以原生事件的事件监听总是快于合成事件的监听响应。
  2. 阻止了原生事件的冒泡后,会阻止合成事件的监听器执行。

标签:冒泡,合成,绑定,react,内存,事件
From: https://www.cnblogs.com/taosifan/p/17082480.html

相关文章

  • 为RecyclerView添加点击事件、长按事件
    本篇展示手机内已安装的软件信息,并添加事件,效果如下一、准备工作保存App信息的beanpublicclassAppInfo{publicStringname;//应用名publicStringp......
  • 项目运行报错:目标进程已退出,但未引发 CoreCLR 启动事件。
      项目运行报错:目标进程已退出,但未引发CoreCLR启动事件。请确保将目标进程配置为使用.NETCore。如果目标进程未运行.NETCore,则发生这种情况并不意外。 解决方......
  • jQuery对象和JS对象区别与转换 jQuery事件绑定&入口函数&样式控制
    jQuery对象和JS对象区别与转换  JQuery对象和JS对象区别与转换1.JQuery对象在操作时,更加方便。2.JQuery对象和js对象方法不通用的.3.两者相互转换......
  • 使用System.Speech实现语音合成
    因为项目需要,需要将文字转为语音。上网搜索了一下,发现微软有这方面的库 System.Speech ,于是拿来直接使用。不过在使用中遇到一些问题,现在总结一下。使用方法一、引用Sy......
  • react-vant 使用
    react-vant是vantUI针对react的UI版本,可以帮助我们搭建react移动端页面安装:npminstallreact-vantlist组件使用import{List}from'react-vant';例子/*eslint-d......
  • React框架运行机制
    React框架运行主流程1.JSX是JS语言的扩展,被babel编译后,会转换成React.creatElement(),这个方法返回的是一个虚拟DOM。2.将虚拟DOM渲染到真实DOM的方法是ReactDom.render()......
  • JavaScript学习笔记—DOM:事件
    事件(event)事件就是用户和页面之间发生的交互行为比如:点击按钮,鼠标移动,双击按钮,敲击键盘,松开按键...可以通过为事件绑定响应函数(回调函数),来完成和用户之间的交互绑定响......
  • react官方文档-高级部分-Render Props学习(重要)
    前言:术语“renderprop”是指一种在React组件之间使用一个值为函数的prop共享代码的简单技术 具有renderprop的组件接受一个函数,该函数返回一个React元素并......
  • QML 自定义窗口简易实现:使用过滤 WINDOW 事件的方式
      1.前言QML自定义窗口目前看到的主要有两种方式,一种是纯QML实现,使用MouseArea来处理鼠标相关事件;另一种是事件过滤,用系统本地API进行操作。前两天看了涛哥......
  • react 高效高质量搭建后台系统 系列 —— 系统布局
    其他章节请看:react高效高质量搭建后台系统系列系统布局前面我们用脚手架搭建了项目,并实现了登录模块,登录模块所依赖的请求数据和antd(ui框架和样式)也已完成。本篇将......