vault backup: 2022-05-09 10:26:43

React 的源码深入/React 的流程解析 - Fiber 递归/React 的流程解析 - Fiber 递归.md

@@ -1,10 +1,14 @@
->React 从 16 开始，对底层架构做了一次重构，和 15 不同，渲染 vdom 的时候一改以往的递归执行，引入了一个新的概念，叫做 Fiber，虽然最后渲染到页面的时候还是递归，但是靠 Fiber 的递归是可中断的，根据优先级由浏览器优先执行任务，保证在大量视图需要更新的时候，浏览器仍然能保证快速的响应
+>React 从 16 开始，对底层架构做了一次重构，和 15 不同，渲染 vdom 的时候一改以往的递归执行，引入了一个新的概念：Fiber，虽然最后渲染到页面的时候仍然是递归，但是靠 Fiber 实现的递归是可中断的，根据优先级由浏览器优先执行任务，保证在大量视图需要更新的时候，浏览器仍然能保证快速的响应
 
 在 React 中，视图的更新使用了双缓存的方式，也就是说在 React 运行时，同时有着两棵 Fiber 树，一颗是当前视图上的 Fiber 树，叫 current，另外一棵是存在内存当中的下一次视图更新时用的叫做 workInProgress，React 在构建时会创建整个 app 唯一的根 Fiber 节点，叫做 FiberRootNode，这个节点上有一个 current 指针，指向的是当前正在页面上显示的 Fiber 树也就是 current，当 workInProgress 递归生成完毕，指针会立即指向 workInProgress ，而旧的 current 则会在下一次渲染中变成 workInProgress ，就这样循环交替完成页面的递归渲染。
 
-Fiber 递归开始首先会交由 createWorkInProgress 函数生成 WorkInProgress 的第一个 Fiber 节点，这个节点就是 FiberNode，所以我们也从 createWorkInProgress 函数开始讲解 React 中 Fiber 递归的流程，**这个函数的主要工作就是根据传入的 Fiber 节点的判断复用 Fiber 节点还是创建新的 Fiber 节点**，而这个判断的条件就是传入的 Fiber 节点的 alternate 属性是否存在。
+Fiber 递归开始首先会交由 createWorkInProgress 函数生成 WorkInProgress 的第一个 Fiber 节点，这个节点就是 FiberNode，所以我们也会从 createWorkInProgress 函数开始讲解 React 中 Fiber 递归的流程，**这个函数的主要工作就是根据传入的 Fiber 节点判断复用 Fiber 节点还是创建新的 Fiber 节点**，而这个判断的条件就是该 Fiber 节点的 alternate 属性是否存在。
 
-在第一次进入到这个函数时也就是首屏渲染中传入的 FiberNode 是不存在这个属性的，所以会进入到 createFiber 函数：即执行创建新 Fiber 节点的逻辑。
+节点的 alternate 属性不存在有两种可能：
+1. 首屏刷新
+2. 当前 Fiber 节点属性新增的节点
+
+如果判断 alternate 不存在，会进入到 createFiber 函数：即执行创建新 Fiber 节点的逻辑。
 
 ```javascript
 function createWorkInProgress(current, pendingProps) {