首页 > 其他分享 >react面试题

react面试题

时间:2022-08-22 01:55:06浏览次数:72  
标签:原生 面试题 合成 react 阻止 事件 event 冒泡

react事件机制
在得到dom树之后,react会处理属性上是否有事件,react不会把事件绑定到真正的节点上,而是把所有的事件绑定在document(最外层节点)上,部分事件除外,如audio、video的onplay、onpause事件,这些事件是用原生标签进行代理,但仍由dispatchEvent进行绑定,并且将得到的事件类型和回调函数存储在映射表中,但对于同一事件类型,不管注册几次,最终只会保留一个有效实例。在事件触发中,开始dom流,捕获阶段,目标阶段,冒泡阶段,冒泡到document时,执行统一的dispatchEvent函数,根据原生对象获得事件触发的组件,根据事件类型生成相应的合成事件,并且封装原生事件和冒泡机制,获取所有父组件,根据映射表得到相应的事件回调,批量处理合成事件的回调。
对于原生事件,事件被触发就会创建一个事件对象,对于合成事件,有一个专门的事件池来管理事件的创建和销毁。当需要使用事件时,就会从事件池中复用对象,当事件结束时,就会销毁事件上的属性,以便下次再复用。这样的话可以减少内存的消耗,提高性能(这个事件池就是比如单击事件SyntheticMouseEvent、焦点事件SyntheticFocusEvent的集合)。
映射表结构
{
click: { key1: fn1, key2: fn2 },
change: { key1: fn1, key2: fn2 }
}
对于同一个事件类型,不管注册几次,最终只会保留一个有效实例(document.addEventListener('click', dispatchEvent))。
阻止原生事件冒泡合成事件不能执行,阻止合成事件冒泡不影响原生事件。
原生事件先执行,合成事件后执行。子原生事件先执行,父原生事件先执行,子合成事件后执行,父合成事件后执行。
阻止冒泡的方法只能通过event.preventDefault()来阻止,不能用event.stopPropagation()和event.cancelBubble = false和return false(return false在js中只能阻止默认行为,只有在jquery才能阻止默认行为和事件冒泡)。
合成事件与原生事件的区别:
1.封装事件,抹平不同浏览器的差异。
2.写法不同,合成事件是用驼峰式写法,原生事件是用全部小写。
3.事件处理的语法不同,合成事件是用函数的形式,原生事件是用字符串的形式。
4.阻止冒泡的方法不同,合成事件是用event.preventDefault()来阻止,原生事件是用event.stopPropagation()和event.cancelBubble = false和return false来阻止。
无法在异步中访问参数e,因为参数e也是合成事件封装的,不是原生事件的参数e。
不是所有的原生事件都有合成事件,比如audio、video的onplay、onpause,这些事件是用原生标签进行代理,但仍由dispatchEvent进行绑定。

标签:原生,面试题,合成,react,阻止,事件,event,冒泡
From: https://www.cnblogs.com/forseize/p/16611582.html

相关文章

  • React 源码-React 事件全解
    事件系统reactv17事件绑定事件绑定在函数setInitialDOMPropertiessetInitialDOMProperties将在complete阶段执行functionsetInitialDOMProperties(tag:st......
  • vscode中react标签自动补全
    在vscode中编写react时,发现标签没有自动补全,写起来不太灵活,查资料发现:默认在js文件中JSX语法无法自动补全,解决方法如下:文件=》首选项=》设置搜索"emmet.includeLanguages"......
  • react组件三大核心之一state
    -<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="wi......
  • 1.spring boot面试题
    SpringBoot基础1.什么是springboot?通过自动配置方式简化Spring应用的开发,弱化配置,遵循约定大于配置的原则,使开发者专注于业务开发而无需过多考虑配置相关操作,通过启动......
  • 【Java面试】并发编程高频面试题,请你说一下你对Happens-Before的理解
    “请你说一下你对Happens-Before的理解”你听到这个问题的时候,知道怎么回答吗?大家好,我是Mic,一个工作了14年的Java程序员。并发编程是面试过程中重点考察的方向,能够考察......
  • 【面试题】循环打印红绿灯
    循环打印红绿灯点击打开视频讲解更加详细红灯3秒后变成绿灯绿灯5秒后变成黄灯黄灯2秒后变成红灯案例:<template><divid="app"><div>循环打印红绿灯</div>......
  • React报错之React Hook useEffect has a missing dependency
    正文从这开始~总览当useEffect钩子使用了一个我们没有包含在其依赖数组中的变量或函数时,会产生"ReactHookuseEffecthasamissingdependency"警告。为了解决该错误,禁......
  • 2022 Java 企业面试题汇总
    Java基础部分请列举至少三个JDK安装目录下的课程性程序(javac)请分析命题:“Java采用自动垃圾回收技术(GC),因此不会出现内存泄露”简单描述单子模式(单例模式)的各种不同实......
  • 【面试题】JSON.stringify()妙用,你真的知道吗?
    JSON.stringify()妙用点击打开视频讲解更加详细语法:JSON.stringify(value,replacer,space)value:将要序列化成一个JSON字符串的值。replacer(可选):如果该参数是一个......
  • React报错之Expected an assignment or function call and instead saw an expression
    正文从这开始~总览当我们忘记从函数中返回值时,会产生"Expectedanassignmentorfunctioncallandinsteadsawanexpression"错误。为了解决该错误,确保显式地使用ret......