Skip to content

Latest commit

 

History

7 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 

Repository files navigation

  • 在我们的React中,我们在渲染阶段遍历整个树。相反,React 遵循一些提示和启发法来跳过没有任何变化的整个子树。
  • 我们还在提交阶段遍历整个树。React 保留一个仅包含有效果的纤程的链表,并且只访问这些纤程。
  • 每次我们构建一个新的正在进行的工作树时,我们都会为每个纤程创建新的对象。React 回收之前树中的纤维。
  • 当我们的React中在渲染阶段收到新的更新时,它会丢弃正在进行的工作树并从根重新开始。React 用过期时间戳标记每个更新,并使用它来决定哪个更新具有更高的优先级。

----------------------------------------------------分割线----------------------------------------------------

  • Fiber树通过beginWork同时进行创建和"向下"遍历
  • 创建过程也是current(旧)、workInProgress(新)两棵树Diffing的过程,决定哪些旧节点需要复用、删除、移动、哪些新节点需要创建
  • 只有父节点相互复用,才会触发子节点Diffing,所以跨父节点的移动是Diffing做不到的
  • 复用的条件是key和type都相同,所以key可以提升复用率
  • 子节点间的Diffing是一个“先做简单题”的过程,假设优先级为:新子节点只有一个 -> 子节点只发生末尾的增删 -> 其他情况
  • 对应的,Diffing策略也分为:单节点Diffing -> 一轮循环 -> 二轮循环
  • Diffing过程中会把结果(操作)以Effect的形式挂载到节点上

总的来说整个fiber协调过程:

从协调过程出发,讨论 Fiber 树在构建过程中表现出的遍历方式、Diffing 理念、副作用收集方式。

  • Fiber 树由链表构成,节点间通过 return(父节点)、child(第一个子节点)、sibling(下一个兄弟节点)相连。
  • 当前视图对应的 Fiber 树称为 current 树,每次协调发起,都会构建新的 workInProgress 树,并在结束时替换 current 树。
  • Fiber 树的遍历方式是深度优先遍历,向下的过程由 beginWork 发起,向上的过程由 completeUnitOfWork 发起。beginWork 每次只向下一步,completeUnitOfWork 则每次向上若干步(由其内部若干个一步循环达成)。
  • Fiber 树是边构建边遍历的,构建在 beginWork 向下过程中发起。 Fiber 树的 Diffing 策略体现在构建过程中:父节点已复用、key 和 type 相同是节点复用的基本条件;子节点 Diffing 从易向难,单节点 Diffing —> 多节点末尾增删(一轮循环) —> 多节点其他情况(二轮循环)。
  • Diffing 的结果,诸如节点的删除、新增、移动,称为 effect,以 effectTag 的形式挂在节点上。
  • completeUnitOfWork 的内部循环会自底向上收集 effect,不断把有 effectTag 的子节点和自身向上合并到父节点的 effectList 中,直至根节点。effectList 是个链表。
  • 宿主相关组件节点会把宿主实例挂到 stateNode 上,间接调用宿主方法对其完成创建、更新,由此也会产生 effectTag。

About

Implement React's main build flow

Resources

Stars

0 stars

Watchers

1 watching

Forks

Releases

Packages

Contributors

Languages