react 源码分析
笔者最近开撸了react源码,自己为自己做个记录,同时希望能帮到其他同学。
从个人的视角来看,react大致分为以下几个部分:
1. react其实没啥,都是透传到react-dom上,前提是我看的是react-dom, 不是react-native.
2. react-dom几大部分:
1. 事件部分,针对原生事件做了封装、分类.
a. 优先级分类: disCreateEvent, UserBlockingEvent, ContinuousEvent。
b. 捕获,冒泡分类: trapCapturedEvent, trapBubbledEvent
c. 代理事件(代理到document上),原生事件(无法代理到document上)
2. fiber架构,替代了以往的虚拟dom, 采用链表形式存储dom结构
FiberRootNode, FiberNode, createFiberFrom.....
3. 生命周期、钩子函数部分
useState, useReducer, useTransition.....
4. 函数组件, class组件分别处理
3. Scheduler部分,用来做调度的, 就是网上经常看到的时间分片,优先级调度
1. 和react-dom之间优先级形成一一对应, 并且能互相转换
ImmediatePriority, UserBlockingPriority, NormalPriority, LowPriority, IdlePriority.
2. 所谓时间切片,其实就是利用了异步操作原理。同步执行一些任务,时间片到期,就换异步执行。