第一章 JSX(React18源码解析一)
第二章 实现Virtual DOM(React18源码解析二）
第三章 根节点关联根Fiber(React18源码解析三)
第四章 初始化UpdateQueue、添加update(React18源码解析四)
第五章 实现时间切片函数和拷贝Fiber(React18源码解析五)
第六章 构建FiberTree(React18源码解析六)
第七章 commit(React18源码解析七)
第八章 React中的事件(React18源码解析八)
第九章 useReducer、useState(React18源码解析九)
第十章 React的dom diff(React18源码解析十)
第十一章 React的Effect(React18源码解析十一)
第十二章 React的同步、并发渲染(React18源码解析十二)
第十三章 React高优打断低优、饥饿问题(React18源码解析十三)
调用栈
1.createRoot(container)
2.SimpleEventPlugin.registerEvents
//定义两个模块对象topLevelEventsToReactNames、allNativeEvents
//topLevelEventsToReactNames Map对象{domEventName:reactEventName}
//allNativeEvents Set对象中保存各原生事件名
3.listenToAllSupportedEvents
//给container添加各捕获、冒泡原生事件
4.listenToNativeEvent
//listenToAllSupportedEvents的具体实现
5.addTrappedEventListener
//listenToNativeEvent的具体实现
6.createEventListenerWrapperWithPriority
//返回一个执行dispatchQueue的函数
6.1.getEventTarget
//获取触发事件原生dom节点
6.2.getClosestInstanceFromNode
//获取触发事件原生dom节点对应fiber
6.3.dispatchEventForPluginEventSystem
6.3.1.dispatchEventsForPlugins
6.3.1.1.extractEvents
//往dispatchQueue中添加事件信息如：[{event:click react event,listeners}]
6.3.1.1.1.accumulateSinglePhaseListeners
//从触发dom节点根据inCapturePhase既是捕获还是冒泡出发返回listeners
//[{
// instance:dom对应fiber,
// listener:从dom上获取event function,
// currentTarget:dom节点
//}]
6.3.1.2.processDispatchQueue
//根据eventSystemFlags & IS_CAPTURE_PHASE得到inCapturePhase,
//从dispatchQueue[i]中获取{event,listeners},
//并根据inCapturePhase从dispatchQueue反向、正向获取执行listeners
7.addEventCaptureListener/addEventBubbleListener
//给container添加事件，
//内部调用dom.addEventListener(event type, listener)
//listener及createEventListenerWrapperWithPriority返回listener
备注：
事件写的很复杂，本文只把关键调用栈贴出来，并贴上它的作用，观者可对照源码学习，相信会帮助大家理解React中的事件
