React三核心

【持续更新中...】

三个部分

• 入口:ReacDom.render
• render:unbatchedUpdates(非批量更新)
• commit:commitRoot

入口

• createRootImpl：创建根节点，根的fiber节点
• listenToNativeEvent：初始化、监听合成事件

render

• unbatchedUpdates:非批量更新

• scheduleUpdateOnFiber:在Fiber节点上调度更新，由Scheduler调度器来执行，会排列优先级，让优先级高的先执行先进入render阶段

• performUnitOfWork:执行一个单元的工作，一个Fiber节点就是一个工作单元

• beginWork: render节点重要的方法1

  • reconcileChildren:创建、对比Fiber节点，会把带有副作用的Fiber标识出来（插入、修改、删除）

• completeWork: render节点重要的方法2

  • createInstance: 创建真实的元素
  • setInitialProperties:为相应的节点赋值相应的属性

在render结尾，会生成一个EffectList的链表，包含所有带有副作用的链表，然后把这个链表，交给commit阶段进行处理

commit节点

• commitRoot:入口
• unstable_runWithPriority:以一个优先级来执行commit，在源码中是 immediately 的优先级，所以是立即执行的
• commitBeforeMutationEffects:在操作真实dom之前，会调用getSnapshotBeforeUpdate生命周期来拿到快照。会以一个优先级来调度Effect，调用useEffect
• commitMutationEffects:操作真实节点，会把副作用的节点作用到真实节点上
• commitLayoutEffects:会调用componentDidUpdate、或者useLayoutEffect

注：mutation是突变的意思，在React是表示开始操作真实节点