引言
React 有着自成一派的事件系统
React 事件相关的问题
都更倾向于考虑我们对于事件工作流、事件特征等
逻辑层面问题的理解,而非对源码细节的把握
回顾原生 DOM 下的数据流
要想理解好 React 事件机制
就必须对原生 DOM 事件流有扎实的掌握
一个页面往往会被绑定许许多的事件
而页面接收事件的顺序,就是事件流
W3C 标准约定了一个事件的传播过程要经过以下3个阶段
- 事件捕获阶段
- 目标阶段
- 事件冒泡阶段
这个跟 iOS 的响应链的思想是一样的。
DOM 事件流下的性能优化思路:事件委托
点击事件最终都会被冒泡到它们共同的父亲
-- ul 元素上去
我们有 e.target
ul 元素可以通过事件对象中的 target 属性
拿到实际触发事件的那个元素
事件委托
把多个子元素的同一类型的监听逻辑
合并到父元素上通过一个监听函数来管理的行为
React 事件系统是如何工作的
当事件在具体的 DOM 节点上被触发后
最终都会冒泡到 document 上
document 上所绑定的统一事件处理程序
会将事件分到到具体的组件实例
认识 React 合成事件
在底层抹平了不同浏览器的差异
在上层面向开发者暴露统一的、稳定的、与 DOM 原生事件相同的事件接口
虽然合成事件并不是原生 DOM 事件,但它保存了原生 DOM 事件的引用
React 事件系统工作流拆解
事件绑定
事件的绑定是在 completeWork 中完成的
事件触发
事件触发的本质是对 dispatchEvent 函数的调用