React 探秘(二)： 双缓存技术

文章目录

• • 前言
  • 双缓存技术是什么
  • [react 为什么需要双缓存技术](#react 为什么需要双缓存技术)
  • [current 和 workInProgress 关联](#current 和 workInProgress 关联)
  • 总结

前言

上篇文章中我们学习了 fiber 是什么，但是对于 fiber 架构中一些细节，我们没有讨论，这里我们展开讨论一下其中的双缓存技术。

上一篇文章 ：React 探秘(一)：fiber 架构

双缓存技术是什么

顾名思义就是有两份缓存，那么这两份缓存是什么？在 react 中这两份缓存代表两颗 fiber 树，，一份代表当前页面-current ，一份代表正在构建中的页面-workInProgress, workInProgress 树构建完成渲染到页面上之后，就会替换为 current 树。

react 为什么需要双缓存技术

我们浏览器是按帧绘制的，如果我们页面有比较大的更新的话，浏览器在两帧之间的计算时间就会变长，就可能会导致页面白一下，再出现内容，导致闪烁。‌

页面首次加载时在内存中构建一个新的 fiber 树，这个过程中不会直接影响用户界面。但是在页面更新时，双缓存机制就会替换旧画面‌，当新的 fiber 树构建完成后，react 将其替换到屏幕上，实现界面的快速更新，减少帧之间的计算。

current 和 workInProgress 关联

fiber 代码中使用 alternate 链接，如下图：

const workInProgress = fiber;

const fiber1 = {
  // ...xxxx
  type: any,
  stateNode: any,
  return: Fiber | null,
  child: Fiber | null,
  sibling: Fiber | null,
  pendingProps: any,
  memoizedProps: any, // 状态
  updateQueue: mixed,
  memoizedState: any, // hooks
  alternate: workInProgress, // 双缓存
}

下面大致讲一下 workInProgress 切换为 currentRoot 的流程：

• render 阶段：新构建一个 workInProgress
• workLoop 阶段：基于 workInProgress 切分 performUnitOfWork；
• reconcileChildren：基于 performUnitOfWork 进行 diff/patch；
• commitRoot：同步真实 dom 渲染，继续执行 currentRoot = workInProgress; workInProgress = null;

react mount 阶段和 update 阶段双缓存切换流程是相似的，区别是在调和阶段会复用 currentRoot 的对应节点数据；经过这几个步骤就完成了 workInProgress 到 currentRoot 的切换。

总结

通过双缓存机制的加持，React能够在不影响用户体验的情况下，处理复杂的更新逻辑，确保用户界面的平滑过渡。这种机制也支持了 React 的异步渲染特性，使得 React 能够更好地管理渲染任务，从而提升用户体验。