react合成事件

react源码要封装合成事件优势

  • 通过事件委托机制,将所有事件处理程序附加到根元素上,而不是每个子元素;提高了性能和内存使用效率,特别是在有大量元素的情况下
  • 重新封装的合成事件消除了浏览器的差异,兼容性好

如何实现的

  • 事件注册: 在createRoot之前就会调用
scss 复制代码
// 当前React18提供了以下5个合成事件
Plugin SimpleEventPlugin.registerEvents(); // SimpleEventPlugin 处理一些常用的基础事件,详细请参见DOMEventProperties.js 中的registerSimpleEvents注册函数 
EnterLeaveEventPlugin.registerEvents(); // 鼠标移动事件 
ChangeEventPlugin.registerEvents(); // 修改事件 
SelectEventPlugin.registerEvents(); // 处理选择事件 
BeforeInputEventPlugin.registerEvents(); // 处理控件输入前事件
  • 事件绑定
scss 复制代码
const createRoot(rootContainerElement){
   .....
   // 在根元素上进行事件绑定
   listenToAllSupportedEvents(rootContainerElement);
}
  • 事件触发
scss 复制代码
 export function dispatchEvent(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  targetContainer: EventTarget,
  nativeEvent: AnyNativeEvent,
): void {
  ......
  // 收集沿途事件、构建合成事件、遍历捕获事件、遍历冒泡事件
  dispatchEventForPluginEventSystem(
    domEventName,
    eventSystemFlags,
    nativeEvent,
    null,
    targetContainer,
  );
}

function dispatchEventsForPlugins(
  domEventName: DOMEventName,
  eventSystemFlags: EventSystemFlags,
  nativeEvent: AnyNativeEvent,
  targetInst: null | Fiber,
  targetContainer: EventTarget,
): void {
  const nativeEventTarget = getEventTarget(nativeEvent);
  // 存放事件的队列
  const dispatchQueue: DispatchQueue = [];
  // 收集沿途事件、构建合成事件
  extractEvents(
    dispatchQueue,
    domEventName,
    targetInst,
    nativeEvent,
    nativeEventTarget,
    eventSystemFlags,
    targetContainer,
  );
  // 遍历捕获事件、遍历冒泡事件
  processDispatchQueue(dispatchQueue, eventSystemFlags);
}

大致流程图如下:

文章借鉴 juejin.cn/post/739947...

相关推荐
中微子5 分钟前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子1 小时前
React 状态管理 源码深度解析
前端·react.js
lichenyang4533 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6733 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js
当牛作馬7 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
然我10 小时前
React 事件机制:从代码到原理,彻底搞懂合成事件的核心逻辑
前端·react.js·面试
光影少年10 小时前
react16-react19都更新哪些内容?
前端·react.js
小陈phd11 小时前
langchain从入门到精通(四十一)——基于ReACT架构的Agent智能体设计与实现
react.js·架构·langchain
16年上任的CTO11 小时前
一文讲清楚React中的key值作用与原理
前端·javascript·react.js·react key