Skip to content

Latest commit

 

History

History
78 lines (63 loc) · 2.35 KB

README.md

File metadata and controls

78 lines (63 loc) · 2.35 KB
Raw

珠峰React的实现

mount分支

mount流程

  • scheduleRoot()

    • 设置待处理节点与根节点，空闲循环函数则自动处理

  • workLoop()

    • 空闲循环函数 反复检查nextUnitOfWork，默认为空，在scheduleRoot()初始化为根节点
    • 如果没有nextUnitOfWork,则只需commitRoot()更新渲染

  • performUnitOfWork()

    • 生成根节点fiber的Fiber树，
    • beginWork()
      • 生成tag,type,props,stateNode,return,child,sibling,effectTag等信息
    • completeUnitOfWork()
      • 生成firstEffect,lastEffect,nextEffect

  • commitRoot()

    • 处理effectTag链表
    • PLACEMENT 则appendChild()

sampleUpdate分支

sampleUpdate流程

  • scheduleRoot()
    • 检测currentRoot是否存在，如果存在则是更新流程
  • commitRoot()
    • 记录workInProgressRoot到currentRoot作为已渲染的缓存
  • reconcileChildren
    • oldFiler与newChild的比较
    • type相同则复用，type不同则删除重建
    • 这里关联newFiber.alternative到oldFiber
  • commitWork()
    • PLACEMENT,DELETION,UPDATE等effectTag的处理
  • setProps()
    • oldProps与newProps的处理

doubleBuffer分支

doubleBuffer实现

doubleBuffer流程

  • scheduleRoot()
    • 检测currentRoot.alternate是否存在，
    • 如果存在说明已经进行过一次更新，直接复用旧的workInProgressRoot
    • 旧的workInProgressRoot存在currentRoot.alternate上

ClassComponent分支

ClassComponent实现

ClassComponent流程

mount阶段

  • performUnitOfWork()
    • 生成根节点fiber的Fiber树，
    • 根节点处理过程tag=TAG_CLASS
    • beginWork()中TAG_CLASS的调用updateClassComponent

update阶段

  • updateClassComponent
    • 生成组件实例
    • 更新队列操作
    • render()重新生成vDOM
    • reconcileChildren处理vDOM

FunctionComponent分支

FunctionComponent实现

FunctionComponent流程

  • updateFunctionComponent
    • 初始化fiber.hooks = [];
  • useReducer
    • 挂载hooks到fiber.hooks
  • dispatch
    • 调度UpdateQueue