React 高级进队教程--特别的事件系统

79 阅读2分钟

引言

React 有着自成一派的事件系统

React 事件相关的问题

都更倾向于考虑我们对于事件工作流、事件特征等

逻辑层面问题的理解,而非对源码细节的把握

回顾原生 DOM 下的数据流

要想理解好 React 事件机制

就必须对原生 DOM 事件流有扎实的掌握

一个页面往往会被绑定许许多的事件

而页面接收事件的顺序,就是事件流

W3C 标准约定了一个事件的传播过程要经过以下3个阶段

  • 事件捕获阶段
  • 目标阶段
  • 事件冒泡阶段

image.png

这个跟 iOS 的响应链的思想是一样的。

DOM 事件流下的性能优化思路:事件委托

点击事件最终都会被冒泡到它们共同的父亲

-- ul 元素上去

我们有 e.target

ul 元素可以通过事件对象中的 target 属性

拿到实际触发事件的那个元素

事件委托

把多个子元素的同一类型的监听逻辑

合并到父元素上通过一个监听函数来管理的行为

React 事件系统是如何工作的

当事件在具体的 DOM 节点上被触发后

最终都会冒泡到 document 上

document 上所绑定的统一事件处理程序

会将事件分到到具体的组件实例

认识 React 合成事件

在底层抹平了不同浏览器的差异

在上层面向开发者暴露统一的、稳定的、与 DOM 原生事件相同的事件接口

虽然合成事件并不是原生 DOM 事件,但它保存了原生 DOM 事件的引用

React 事件系统工作流拆解

事件绑定

事件的绑定是在 completeWork 中完成的

image.png

image.png

事件触发

事件触发的本质是对 dispatchEvent 函数的调用

image.png

image.png

image.png

image.png

image.png

image.png

image.png