React事件机制源码解析，如何改写为长尾词？

本文共计2292个文字，预计阅读时间需要10分钟。

React v17中事件机制有了较大的改动，与v16相比，差异尤为明显。本文简要概述React版本为17.0.1，使用ReactDOM.render创建应用，不含优先级相关。

原理简述：React中事件分为委托事件（Delegated Events）和非委托事件。委托事件是指将子组件的事件委托到父组件上处理，而非委托事件则直接在子组件上处理。

React v17里事件机制有了比较大的改动，想来和v16差别还是比较大的。

本文浅析的React版本为17.0.1，使用ReactDOM.render创建应用，不含优先级相关。

原理简述

React中事件分为委托事件（DelegatedEvent）和不需要委托事件（NonDelegatedEvent），委托事件在fiberRoot创建的时候，就会在root节点的DOM元素上绑定几乎所有事件的处理函数，而不需要委托事件只会将处理函数绑定在DOM元素本身。

同时，React将事件分为3种类型——discreteEvent、userBlockingEvent、continuousEvent，它们拥有不同的优先级，在绑定事件处理函数时会使用不同的回调函数。

React事件建立在原生基础上，模拟了一套冒泡和捕获的事件机制，当某一个DOM元素触发事件后，会冒泡到React绑定在root节点的处理函数，通过target获取触发事件的DOM对象和对应的Fiber节点，由该Fiber节点向上层父级遍历，收集一条事件队列，再遍历该队列触发队列中每个Fiber对象对应的事件处理函数，正向遍历模拟冒泡，反向遍历模拟捕获，所以合成事件的触发时机是在原生事件之后的。