3分钟弄懂React合成事件和事件插件
date
Sep 14, 2023
slug
react_synthetic_events
status
Published
tags
前端
frontend
react
interview
summary
react合成事件是前端面试高频题，此文将带你彻底弄懂
type
Post
当用户在为onclick添加函数时，React并没有将click绑定在DOM上。
而是在document处监听所有支持的事件，当事件发生并冒泡至document时，React将事件内容封装交给中间层SyntheticEvent（负责所有事件的合成）。
当事件触发的时候，使用统一的分发函数dispatchEvent将指定函数执行。 React在自己的合成事件中重写了stopPropagation方法，将isPropagationStoped设置成true，然后在遍历每一级事件的过程中。
为了解决跨浏览器兼容问题，SyntheticEvent将被传递给事件处理函数，SyntheticEvent是 React 跨浏览器的浏览器原生事件包装器，它还拥有和浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault()。
react模拟所有原生DOM事件所有能力的一个事件对象，浏览器原生事件的跨浏览器包装器。
React里所有事件都是合成的，可以通过e.nativeEvent获取
- react17以后所有事件绑定在container上（之前在document上），而不是绑定在dom元素上，减少内存开销，所有事件处理都在container上，其他节点没有绑定事件
- 自身实现一套冒泡机制，不能通过return false阻止冒泡
- 通过synthetic event 实现事件合成
好处
- 浏览器兼容，跨平台。合成事件能够抹平不同浏览器事件之前的差异
- 避免垃圾回收。原生DOM事件可能会被频繁创建和回收，因此React引入事件池，事件池中获取或者释放事件对象。React事件对象不会被销毁，而是放进一个数组，灵活取用。
- 方便事件的统一管理。
原理：事件绑定和事件触发
绑定就是React17绑定在container上。当真实的DOM触发事件时，会去构造合成事件对象，按照冒泡或捕获的路径区收集事件的回调函数，此过程中会先处理原生事件，冒泡到document对象，再处理合成事件。 React17中会先执行捕获事件，再执行冒泡事件。
事件插件 EventPlugin
React合成事件和原生事件的执行过程，是通过事件插件产生关联的，每个插件只处理对应的合成事件。
比如onClick对应SimpleEventPlugin， React会在一开始把这些插件加载进来，初始化一些全局对象，比如其中一个对象是RegistrationNameDependencies
return false不能阻止事件的默认行为，因为react采用事件委托，由dispatchEvent统一分发事件处理函数
如果需要组织冒泡
- 阻止合成事件的冒泡用e.stopPropagation()
- 阻止合成事件和最外层document事件冒泡，使用e.nativeEvent.stopImmediatePropogation()
- 阻止合成事件和除了最外层document事件冒泡，通过判断e.target避免