合成事件
合成事件的触发基于浏览器的事件机制,通过冒泡机制冒泡到最顶层元素,然后再由dispatchEvent统一处理
浏览器事件机制
捕获阶段(父到子) -> 获取到目标元素 -> 冒泡阶段(子到父) Q:若对合成事件进行阻止,原生事件是否会执行。会 A:因为原生事件优先于合成事件执行。而合成事件处于目标阶段,它阻止的冒泡只是阻止合成的事件冒泡,但是原生事件在捕获阶段就已经执行了
合成事件特点
- React上注册的事件最终会绑定在根结点上(react 17是根结点,之前是在document上),而不是组件对应的dom。
- React自身实现了一套事件冒泡机制,因此e.stoppropagation无效
- React通过对象池的形式管理合成事件对象的创建和销毁,减少垃圾的生成和新对象内存的分配
React事件机制
事件注册、事件存储、事件分发、事件执行(构造合成事件、批处理)
为什么需要合成事件
- 统一浏览器的各个标准,兼容多个浏览器的事件,在底层抹平不同浏览器的差异
- 对合成事件中的调用的setstate进行合并,避免多次更新造成浪费
- 更好的实现事件管控,以便契合react自身的一些策略和优化