React 探秘(二)： 双缓存技术
前言
上篇文章中我们学习了 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阶段：新构建一个workInProgressworkLoop阶段：基于workInProgress切分performUnitOfWork；reconcileChildren：基于performUnitOfWork进行diff/patch；commitRoot：同步真实 dom 渲染，继续执行currentRoot = workInProgress; workInProgress = null;
react mount 阶段和 update 阶段双缓存切换流程是相似的，区别是在调和阶段会复用 currentRoot 的对应节点数据；经过这几个步骤就完成了 workInProgress 到 currentRoot 的切换。
总结
通过双缓存机制的加持，React能够在不影响用户体验的情况下，处理复杂的更新逻辑，确保用户界面的平滑过渡。这种机制也支持了 React 的异步渲染特性，使得 React 能够更好地管理渲染任务，从而提升用户体验。
原文地址：https://blog.csdn.net/qq_44983621/article/details/142876002
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！