From 14062e30aaebd6bdede14b3c6db80aff0d3f46da Mon Sep 17 00:00:00 2001 From: YuJian Date: Mon, 9 May 2022 10:26:43 +0800 Subject: [PATCH] vault backup: 2022-05-09 10:26:43 --- .../React 的流程解析 - Fiber 递归.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的流程解析 - Fiber 递归.md b/React 的源码深入/React 的流程解析 - Fiber 递归/React 的流程解析 - Fiber 递归.md index 816f3d4..9bf5f3e 100644 --- a/React 的源码深入/React 的流程解析 - Fiber 递归/React 的流程解析 - Fiber 递归.md +++ b/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) {