eact源码解析7.Fiber架构

最新推荐文章于 2024-05-22 16:12:46 发布

buchila11

最新推荐文章于 2024-05-22 16:12:46 发布

阅读量223

点赞数

文章标签： react.js 前端

本文链接：https://blog.csdn.net/m0_61818535/article/details/124114661

版权

本文深入探讨React的Fiber架构，解释其在解决渲染卡顿问题上的作用。Fiber通过时间片调度确保JS执行与浏览器渲染的平衡，实现异步可中断更新。Fiber数据结构用于保存工作单元信息，支持任务分解、增量渲染、优先级管理以及状态保存。文章还详细介绍了Fiber的双缓存机制，包括current Fiber和workInProgress Fiber的切换，以及在mount和update过程中的应用。

摘要由CSDN通过智能技术生成

react源码解析7.Fiber架构

视频讲解（高效学习）：进入学习

Fiber的深度理解

react15在render阶段的reconcile是不可打断的，这会在进行大量节点的reconcile时可能产生卡顿，因为浏览器所有的时间都交给了js执行，并且js的执行时单线程。为此react16之后就有了scheduler进行时间片的调度，给每个task（工作单元）一定的时间，如果在这个时间内没执行完，也要交出执行权给浏览器进行绘制和重排，所以异步可中断的更新需要一定的数据结构在内存中来保存工作单元的信息，这个数据结构就是Fiber。

那么有了Fiber这种数据结构后，能完成哪些事情呢，

工作单元任务分解 ：Fiber最重要的功能就是作为工作单元，保存原生节点或者组件节点对应信息（包括优先级），这些节点通过指针的形似形成Fiber树
增量渲染：通过jsx对象和current Fiber的对比，生成最小的差异补丁，应用到真实节点上
根据优先级暂停、继续、排列优先级：Fiber节点上保存了优先级，能通过不同节点优先级的对比，达到任务的暂停、继续、排列优先级等能力，也为上层实现批量更新、Suspense提供了基础
**保存状态：**因为Fiber能保存状态和更新的信息，所以就能实现函数组件的状态更新，也就是hooks

Fiber的数据结构

Fiber的自带的属性如下：

//ReactFiber.old.js
function FiberNode(
  tag: WorkTag,
  pendingProps: mixed,
  key: null | string,
  mode: TypeOfMode,
) {
   
  //作为静态的数据结构 保存节点的信息 
  this.tag = tag;//对应组件的类型
  this.key = key;//key属性
  this.elementType = null;//元素类型
  this.type = null;//func或者class
  this.stateNode = null;//真实dom节点

  //作为fiber数架构 连接成fiber树
  this.return = null;