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...

相关推荐
JiaLin_Denny36 分钟前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
斯文的孙8 小时前
React JSX:每天都在用,但你真的了解它吗?
前端·react.js
张勇8299 小时前
# React状态管理最佳实践:从原理到2025年主流方案
前端·react.js
小肚肚肚肚肚哦12 小时前
React 源码解读 (初版)
react.js
curdcv_po13 小时前
🔥🔥🔥结合 vue 或 react,去写three.js
前端·react.js·three.js
却尘14 小时前
React状态的人格分裂:当Vibe Coding遇上状态污染,坑你就完了。
前端·react.js·vibecoding
想要学好前端的阿毛15 小时前
手写一个简单的react-router6 Part2
react.js
懋学的前端攻城狮18 小时前
从 UI = f(state) 到 Fiber 架构:解构 React 设计哲学的“第一性原理”
前端·react.js·前端框架
前端小咸鱼一条18 小时前
React中的this绑定
前端·javascript·react.js
前端小咸鱼一条19 小时前
React的基本语法和原理
前端·javascript·react.js