面试官：说说对React Fiber架构的理解？解决了什么问题？

本文转载自微信公众号「JS每日一题」，作者灰灰。转载本文请联系JS每日一题公众号。

公司主营业务：成都做网站、网站设计、移动网站开发等业务。帮助企业客户真正实现互联网宣传，提高企业的竞争能力。创新互联是一支青春激扬、勤奋敬业、活力青春激扬、勤奋敬业、活力澎湃、和谐高效的团队。公司秉承以“开放、自由、严谨、自律”为核心的企业文化，感谢他们对我们的高要求，感谢他们从不同领域给我们带来的挑战，让我们激情的团队有机会用头脑与智慧不断的给客户带来惊喜。创新互联推出合川免费做网站回馈大家。

一、问题

JavaScript引擎和页面渲染引擎两个线程是互斥的，当其中一个线程执行时，另一个线程只能挂起等待

如果 JavaScript 线程长时间地占用了主线程，那么渲染层面的更新就不得不长时间地等待，界面长时间不更新，会导致页面响应度变差，用户可能会感觉到卡顿

而这也正是 React 15 的 Stack Reconciler所面临的问题，当 React在渲染组件时，从开始到渲染完成整个过程是一气呵成的，无法中断

如果组件较大，那么js线程会一直执行，然后等到整棵VDOM树计算完成后，才会交给渲染的线程

这就会导致一些用户交互、动画等任务无法立即得到处理，导致卡顿的情况

二、是什么

React Fiber 是 Facebook 花费两年余时间对 React 做出的一个重大改变与优化，是对 React 核心算法的一次重新实现。从Facebook在 React Conf 2017 会议上确认，React Fiber 在React 16 版本发布

在react中，主要做了以下的操作：

  • 为每个增加了优先级，优先级高的任务可以中断低优先级的任务。然后再重新，注意是重新执行优先级低的任务
  • 增加了异步任务，调用requestIdleCallback api，浏览器空闲的时候执行
  • dom diff树变成了链表，一个dom对应两个fiber(一个链表)，对应两个队列，这都是为找到被中断的任务，重新执行

从架构角度来看，Fiber 是对 React核心算法(即调和过程)的重写

从编码角度来看，Fiber是 React内部所定义的一种数据结构，它是 Fiber树结构的节点单位，也就是 React 16 新架构下的虚拟DOM

一个 fiber就是一个 JavaScript对象，包含了元素的信息、该元素的更新操作队列、类型，其数据结构如下：

 
 
 
 
      
  
  
  
  1. type Fiber = { 
    2.   
  
  
  
  2.   // 用于标记fiber的WorkTag类型，主要表示当前fiber代表的组件类型如FunctionComponent、ClassComponent等 
    3.   
  
  
  
  3.   tag: WorkTag, 
    4.   
  
  
  
  4.   // ReactElement里面的key 
    5.   
  
  
  
  5.   key: null | string, 
    6.   
  
  
  
  6.   // ReactElement.type，调用`createElement`的第一个参数 
    7.   
  
  
  
  7.   elementType: any, 
    8.   
  
  
  
  8.   // The resolved function/class/ associated with this fiber. 
    9.   
  
  
  
  9.   // 表示当前代表的节点类型 
    10.   
  
  
  
  10.   type: any, 
    11.   
  
  
  
  11.   // 表示当前FiberNode对应的element组件实例 
    12.   
  
  
  
  12.   stateNode: any, 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.   // 指向他在Fiber节点树中的`parent`，用来在处理完这个节点之后向上返回 
    15.   
  
  
  
  15.   return: Fiber | null, 
    16.   
  
  
  
  16.   // 指向自己的第一个子节点 
    17.   
  
  
  
  17.   child: Fiber | null, 
    18.   
  
  
  
  18.   // 指向自己的兄弟结构，兄弟节点的return指向同一个父节点 
    19.   
  
  
  
  19.   sibling: Fiber | null, 
    20.   
  
  
  
  20.   index: number, 
    21.   
  
  
  
  21.  
    22.   
  
  
  
  22.   ref: null | (((handle: mixed) => void) & { _stringRef: ?string }) | RefObject, 
    23.   
  
  
  
  23.  
    24.   
  
  
  
  24.   // 当前处理过程中的组件props对象 
    25.   
  
  
  
  25.   pendingProps: any, 
    26.   
  
  
  
  26.   // 上一次渲染完成之后的props 
    27.   
  
  
  
  27.   memoizedProps: any, 
    28.   
  
  
  
  28.  
    29.   
  
  
  
  29.   // 该Fiber对应的组件产生的Update会存放在这个队列里面 
    30.   
  
  
  
  30.   updateQueue: UpdateQueue | null, 
    31.   
  
  
  
  31.  
    32.   
  
  
  
  32.   // 上一次渲染的时候的state 
    33.   
  
  
  
  33.   memoizedState: any, 
    34.   
  
  
  
  34.  
    35.   
  
  
  
  35.   // 一个列表，存放这个Fiber依赖的context 
    36.   
  
  
  
  36.   firstContextDependency: ContextDependency | null, 
    37.   
  
  
  
  37.  
    38.   
  
  
  
  38.   mode: TypeOfMode, 
    39.   
  
  
  
  39.  
    40.   
  
  
  
  40.   // Effect 
    41.   
  
  
  
  41.   // 用来记录Side Effect 
    42.   
  
  
  
  42.   effectTag: SideEffectTag, 
    43.   
  
  
  
  43.  
    44.   
  
  
  
  44.   // 单链表用来快速查找下一个side effect 
    45.   
  
  
  
  45.   nextEffect: Fiber | null, 
    46.   
  
  
  
  46.  
    47.   
  
  
  
  47.   // 子树中第一个side effect 
    48.   
  
  
  
  48.   firstEffect: Fiber | null, 
    49.   
  
  
  
  49.   // 子树中最后一个side effect 
    50.   
  
  
  
  50.   lastEffect: Fiber | null, 
    51.   
  
  
  
  51.  
    52.   
  
  
  
  52.   // 代表任务在未来的哪个时间点应该被完成，之后版本改名为 lanes 
    53.   
  
  
  
  53.   expirationTime: ExpirationTime, 
    54.   
  
  
  
  54.  
    55.   
  
  
  
  55.   // 快速确定子树中是否有不在等待的变化 
    56.   
  
  
  
  56.   childExpirationTime: ExpirationTime, 
    57.   
  
  
  
  57.  
    58.   
  
  
  
  58.   // fiber的版本池，即记录fiber更新过程，便于恢复 
    59.   
  
  
  
  59.   alternate: Fiber | null, 
    60.   
  
  
  
  60. } 
    61.

三、如何解决

Fiber把渲染更新过程拆分成多个子任务，每次只做一小部分，做完看是否还有剩余时间，如果有继续下一个任务;如果没有，挂起当前任务，将时间控制权交给主线程，等主线程不忙的时候在继续执行

即可以中断与恢复，恢复后也可以复用之前的中间状态，并给不同的任务赋予不同的优先级，其中每个任务更新单元为 React Element 对应的 Fiber节点

实现的上述方式的是requestIdleCallback方法

window.requestIdleCallback()方法将在浏览器的空闲时段内调用的函数排队。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应

首先 React 中任务切割为多个步骤，分批完成。在完成一部分任务之后，将控制权交回给浏览器，让浏览器有时间再进行页面的渲染。等浏览器忙完之后有剩余时间，再继续之前 React 未完成的任务，是一种合作式调度。

该实现过程是基于 Fiber节点实现，作为静态的数据结构来说，每个 Fiber 节点对应一个 React element，保存了该组件的类型(函数组件/类组件/原生组件等等)、对应的 DOM 节点等信息。

作为动态的工作单元来说，每个 Fiber 节点保存了本次更新中该组件改变的状态、要执行的工作。

每个 Fiber 节点有个对应的 React element，多个 Fiber节点根据如下三个属性构建一颗树：

 
 
 
 
      
  
  
  
  1. // 指向父级Fiber节点 
    2.   
  
  
  
  2. this.return = null 
    3.   
  
  
  
  3. // 指向子Fiber节点 
    4.   
  
  
  
  4. this.child = null 
    5.   
  
  
  
  5. // 指向右边第一个兄弟Fiber节点 
    6.   
  
  
  
  6. this.sibling = null 
    7.

通过这些属性就能找到下一个执行目标

参考文献

https://juejin.cn/post/6926432527980691470

https://zhuanlan.zhihu.com/p/137234573

https://vue3js.cn/interview

本文题目：面试官：说说对React Fiber架构的理解？解决了什么问题？
地址分享：http://www.36103.cn/qtweb/news10/14060.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站排名知识

同城分类信息

联通服务器托管　　 　四川电信高防服务器托管　　 　成都网络营销公司　　 　西信服务器托管　　 　成都搅拌罐车　　 　成都企业网站设计　　 　成都模版网站建设　　 　成都网站制作　　 　微信小程序开发　　 　四川盐亭做网站　　 　成都网站制作　　 　宇仓仓储　　 　成都微信小程序开发　　 　德阳电信机房　　 　品牌网站定制　　 　成都网站建设　　 　企业网站建设　　 　成都门户网站建设　　 　抖音短视频拍摄　　 　网站建设