diff --git a/React 的源码深入/React Reconciler - Fiber 创建.md b/React 的源码深入/React Reconciler - Fiber 创建.md index 8a4ec50..3cd983f 100644 --- a/React 的源码深入/React Reconciler - Fiber 创建.md +++ b/React 的源码深入/React Reconciler - Fiber 创建.md @@ -7,6 +7,7 @@ ## 首屏渲染 ### createWorkInProgress + React 的首屏渲染时会交由 createWorkInProgress 函数生成一个 WorkInProgress Fiber 节点,这个节点就是 FiberNode,createWorkInProgress 接收两个参数,分别是 current 和 pendingProps,这里的 pendingProps 是组件的属性 因为传入的是 current Fiber 树,所以 createWorkInProgress 内会从 current 的 alternate 取出中取出与之链接的 WorkInProgress Fiber 节点,并对其做空值判断,因为对于首屏渲染而言,WorkInProgress 是不存在的,所以会走到不存在 WorkInProgress 的逻辑,在这里也就是调用 createFiber 函数,这个函数会更加传递的参数 new 一个 Fiber 的实例,其内部并没有什么复杂的逻辑,而是对 Fiber 节点的属性进行了初始化,createFiber 返回之后,会对返回的 FiberNode 节点进行赋值,复用 current FiberNode 节点的内容,并对它们各自的 alternate 进行赋值,双向链接 createWorkInProgress 之后,Fiber 的操作就会交由 beginWork 和 completeWork 开始正式的递归 @@ -30,9 +31,7 @@ createWorkInProgress 之后,Fiber 的操作就会交由 beginWork 和 complete updateHostRoot 函数中首先会执行 pushHostRootContext 方法,这个方法和 Context 相关,现在暂且不谈 在 updateHostRoot 逻辑一开始,它会将 current 和 WorkInProgress 传递给 cloneUpdateQueue 这个函数,这个函数会将 Fiber 中的 queue 属性进行 clone,除非它们已经是 clone 之后的属性,那么具体是怎么做的判断是否是 clone 过的属性呢?其实很简单,它只是使用了 === 三个等于判断属性的引用是否相同,也就是说这个函数实际上做的是清除引用,保证在之后对 WorkInProgress 的操作不会影响到 current Fiber 树,判断两个 Fiber 树的 updateQueue 属性的引用完全相同,那么就会创建一个新的对象并重复赋值达到清除应用的目的,最后赋值给 WorkInProgress Fiber 节点 -之后,再把 WorkInProgress Fiber 节点交给 processUpdateQueue sh - -processUpdateQueue +之后,再把 WorkInProgress Fiber 节点交给 processUpdateQueue 函数,这个函数主要是处理更新队列,在这里先不展开,TODO ### completeWork