React事件机制

对 react事件机制 的表象理解，验证，意义和思考。

在开始介绍react事件机制之前，我们先简单回顾 JavaScript 原生事件中几个重要知识点：

当某个元素触发某个事件（如 onclick ），顶层对象 document 就会发出一个事件流，随着 DOM 树的节点向目标元素节点流去，直到到达事件真正发生的目标元素。在这个过程中，事件相应的监听函数是不会被触发的。

当到达目标元素之后，执行目标元素该事件相应的处理函数。如果没有绑定监听函数，那就不执行。

从目标元素开始，往顶层元素传播。途中如果有节点绑定了相应的事件处理函数，这些函数都会被触发一次。如果想阻止事件起泡，可以使用 e.stopPropagation() 或者 e.cancelBubble=true（IE）来阻止事件的冒泡传播。

简单理解就是将一个响应事件委托到另一个元素。 当子节点被点击时，click 事件向上冒泡，父节点捕获到事件后，我们判断是否为所需的节点，然后进行处理。其优点在于减少内存消耗和动态绑定事件。

react 事件机制基本理解：react自身实现了一套自己的事件机制，包括事件注册、事件的合成、事件冒泡、事件派发等，虽然和原生的是两码事，但也是基于浏览器的事件机制下完成的。

我们都知道react 的所有事件并没有绑定到具体的dom节点上而是绑定在了document 上，然后由统一的事件处理程序来处理，同时也是基于浏览器的事件机制（冒泡），所有节点的事件都会在 document 上触发。

我们先写一段含有点击事件的react JSX语法，看一下它最终会变成什么样子？

经过babel转换成React.createElement形式，如下：

事件被存储在React.createElement的props中

最终转成fiber对象形式如下：

fiber对象上的memoizedProps 和 pendingProps保存了我们的事件。

接下来我们搞搞事情😂😂😂，在demo项目中加上一个input输入框，并绑定一个onChange事件。睁大眼睛看看接下来会发生什么？

我们先看一下input dom元素上绑定的事件

然后我们看一下document上绑定的事件

我们发现，我们给绑定的onChange，并没有直接绑定在input上，而是统一绑定在了document上，然后我们onChange被处理成很多事件监听器，比如blur , change , input , keydown , keyup 等。

综上我们可以得出结论：

试想一下：

如果一个节点上同时绑定了合成和原生事件，那么禁止冒泡后执行关系是怎样的呢？

其实读到这里答案已经有了。我们现在基于目前的知识去分析下这个关系。

因为合成事件的触发是基于浏览器的事件机制来实现的，通过冒泡机制冒泡到最顶层元素，然后再由 dispatchEvent统一去处理。

原生事件阻止冒泡肯定会阻止合成事件的触发。

合成事件的阻止冒泡不会影响原生事件。

为什么呢？先回忆下浏览器事件机制

浏览器事件的执行需要经过三个阶段，捕获阶段-目标元素阶段-冒泡阶段。

节点上的原生事件的执行是在目标阶段，然而合成事件的执行是在冒泡阶段，所以原生事件会先合成事件执行，然后再往父节点冒泡。

既然原生都阻止冒泡了，那合成还执行个啥嘞。

好，轮到合成的被阻止冒泡了，那原生会执行吗？当然会了。

因为原生的事件先于合成的执行，所以合成事件内阻止的只是合成的事件冒泡。

所以得出结论：

原生事件（阻止冒泡）会阻止合成事件的执行

合成事件（阻止冒泡）不会阻止原生事件的执行

两者最好不要混合使用，避免出现一些奇怪的问题

这里我们手写一个简单示例来观察 React 事件和原生事件的执行顺序：

在 React 中，“合成事件”会以事件委托的方式绑定在组件最上层，并在组件卸载（unmount）阶段自动销毁绑定的事件。

触发事件后，可以看到控制台输出：

通过上面流程，我们可以理解：

对于开发者来说，更希望使用 e.stopPropagation() 方法来阻止当前 DOM 事件冒泡，但事实上，从前两节介绍的执行顺序可知，e.stopPropagation() 只能阻止合成事件间冒泡，即下层的合成事件，不会冒泡到上层的合成事件。事件本身还都是在 document 上执行。所以最多只能阻止 document 事件不能再冒泡到 window 上。

输出结果：

合成事件和原生事件最好不要混用。 原生事件中如果执行了stopPropagation方法，则会导致其他React事件失效。因为所有元素的事件将无法冒泡到document上。 通过前面介绍的两者事件执行顺序来看，所有的 React 事件都将无法被注册。通过代码一起看看：

输出结果：

react 自己做这么多的意义是什么？

React 合成事件（SyntheticEvent）是 React 模拟原生 DOM 事件所有能力的一个事件对象，即浏览器原生事件的跨浏览器包装器。它根据 W3C 规范 来定义合成事件，兼容所有浏览器，拥有与浏览器原生事件相同的接口。

即在react中，我们绑定的事件onClick等，并不是原生事件，而是由原生事件合成的React事件，比如 click事件合成为onClick事件。比如blur , change , input , keydown , keyup等 , 合成为onChange。

看个简单示例：

在 React 中，所有事件都是合成的，不是原生 DOM 事件，但可以通过 e.nativeEvent 属性获取 DOM 事件。

学习一个新知识的时候，一定要知道为什么会出现这个技术。 那么 React 为什么使用合成事件？其主要有三个目的：

React 采用的是顶层事件代理机制，能够保证冒泡一致性，可以跨浏览器执行。React 提供的合成事件用来抹平不同浏览器事件对象之间的差异，将不同平台事件模拟合成事件。

事件对象可能会被频繁创建和回收，因此 React 引入事件池，在事件池中获取或释放事件对象。即 React 事件对象不会被释放掉，而是存放进一个数组中，当事件触发，就从这个数组中弹出，避免频繁地去创建和销毁(垃圾回收) 。

本文不介绍源码啦，对具体实现的源码有兴趣的朋友可以查阅：《React SyntheticEvent》 。

React 事件与原生事件很相似，但不完全相同。这里列举几个常见区别：

原生事件命名为纯小写（onclick, onblur），而 React 事件命名采用小驼峰式（camelCase），如 onClick 等：

原生事件中事件处理函数为字符串，在 React JSX 语法中，传入一个函数作为事件处理函数。

在原生事件中，可以通过返回 false 方式来阻止默认行为，但是在 React 中，需要显式使用 preventDefault() 方法来阻止。 这里以阻止  标签默认打开新页面为例，介绍两种事件区别：

小结前面几点区别：

合成事件对象池，是 React 事件系统提供的一种性能优化方式。合成事件对象在事件池统一管理，不同类型的合成事件具有不同的事件池。

关于“事件池是如何工作”的问题，可以看看下面图片：

React 事件池仅支持在 React 16 及更早版本中，在 React 17 已经不使用事件池。 下面以 React 16 版本为例：

可以看到输出：

对于一次点击事件的处理函数，在正常的函数执行上下文中打印e.target就指向了dom元素，但是在setTimeout中打印却是null，如果这不是React事件系统，两次打印的应该是一样的，但是为什么两次打印不一样呢？ 因为在React采取了一个事件池的概念，每次我们用的事件源对象，在事件函数执行之后，可以通过releaseTopLevelCallbackBookKeeping等方法将事件源对象释放到事件池中，这样的好处每次我们不必再创建事件源对象，可以从事件池中取出一个事件源对象进行复用，在事件处理函数执行完毕后,会释放事件源到事件池中，清空属性，这就是setTimeout中打印为什么是null的原因了。

在 React 16 及之前的版本，合成事件对象的事件处理函数全部被调用之后，所有属性都会被置为 null 。这时，如果我们需要在事件处理函数运行之后获取事件对象的属性，可以使用 React 提供的 e.persist() 方法，保留所有属性：

再看下结果：

React v17 整体改动不是很大，但是事件系统的改动却不小，首先上述的很多执行函数，在v17版本不复存在了。我来简单描述一下v17事件系统的改版。

1 事件统一绑定container上，ReactDOM.render(app， container);而不是document上，这样好处是有利于微前端的，微前端一个前端系统中可能有多个应用，如果继续采取全部绑定在document上，那么可能多应用下会出现问题。

2 对齐原生浏览器事件

React 17 中终于支持了原生捕获事件的支持， 对齐了浏览器原生标准。同时 onScroll 事件不再进行事件冒泡。onFocus 和 onBlur 使用原生 focusin， focusout 合成。

3 取消事件池 React 17 取消事件池复用，也就解决了上述在setTimeout打印，找不到e.target的问题。

在 React 中，JSX 回调函数中的 this 经常会出问题，在 Class 中方法不会默认绑定 this，就会出现下面情况， this.funName 值为 undefined ：

我们有 2 种方式解决这个问题：

或者在回调函数中使用箭头函数：

经常在遍历列表时，需要向事件传递额外参数，如 id 等，来指定需要操作的数据，在 React 中，可以使用 2 种方式向事件传参：

这两种方式是等价的：

参考文章：

segmentfault.com/a/119000003…

toutiao.io/posts/28of1…

juejin.cn/post/695563…