面试官：你是怎样理解Fiber的

hello，这里是潇晨，今天我们来聊一聊Fiber。不知道大家面试的时候有没有遇到过和react Fiber相关的问题呢，这一类问题比较开放，但也是考察对react源码理解深度的问题，如果面试高级前端岗，恰巧你平时用的是react，那这道面试题是你必需要会的一道。

大型应用为什么会慢

那之前的应用为什么会慢呢，传统的前端应用例如js原生或者jquery应用，在构建复杂的大型应用的时候，各种页面之前的相互操作和更新很有可能会引起页面的重绘或重排列，而频繁操作这些dom其实是非常消耗性能的

在看下图，这是一个节点上的属性，可以看到一个节点上的属性是非常多的，在复杂应用中，操作这些属性的时候可能一不小心就会引起节点大量的更新，那如何提高应用的性能呢？

const div = document.createElement('div');
let str = ''
for(let k in div){
   
  str+=','+k
}
console.log(str)

为什么会出现Fiber

react从15版本开始，到现在的17，以及快出来的18，内部经历了非常大的变化，这一切都是围绕着一个目标进行的，这个目标是异步可中断的更新，而这个目的的最终结果是为了构建快速响应的应用。

复杂应用在更新的时候可能会更新大量的dom，所以react在应用层和dom层之间增加了一层Fiber，而Fiber是在内存中工作的，所以在更新的时候只需要在内存中进行dom更新的比较，最后再应用到需要更新真实节点上

这就引出了一个对比新老节点的过程，而对比两棵树的计算其实是非常消耗性能的，react提出了diff算法来降低对比的复杂度，具体diff的过程可以参考往期文章 diff算法

但是面对越来越复杂的应用，diff算法消耗的时间片还是很长，在没做出优化的情况下，react在进行Fiber的对比和更新节点上的状态的时候依然力不从心，

• 在react15之前，这个对比的过程被称之为stack reconcile，它的对比方式是‘一条路走到黑’，也就是说这个对比的过程是不能被中断的，这会出现什么情况呢，比如在页面渲染一个比较消耗性能操作，如果这个时候如果用户进行一些操作就会出现卡顿，应用就会显得不流畅。
• react16之后出现了scheduler，以及react17的Lane模型，它们可以配合着工作，将比较耗时的任务按照Fiber节点划分成工作单元，并且遍历Fiber树计算或者更新节点上的状态可以被中断、继续，以及可以被高优先级的任务打断，比如用户触发的更新就是一个高优先级的任务，高优先级的任务优先执行，应用就不会太卡顿。

什么是Fiber

这就是react所要做的事情了，react创新的提出了jsx，声明式地描述页面呈现的效果，jsx会被babel经过ast解析成React.createElement，而React.createElement函数执行之后就是jsx对象或者说是virtual-dom

• 在mount的时候，也就是首次渲染的时候，render阶段会根据jsx对象生成新的Fiber节点，然后这些Fiber节点会被标记成带有‘Placement’的副作用，说明它们是新增的节点，需要被插入到真实节点中，在commit阶段就会操作真实节点，将它们插入到dom树中。
• 在update的时候，也就是应用触发更新的时候，render阶段会根据最新的jsx和老的Fiber进行对比，生成新的Fiber，这些Fiber会带有各种副作用，比如‘Deletion’、‘Update’、‘Placement’等，这一个对比的过程就是diff算法 ，在commit阶段会操作真实节点，执行相应的副作用。

如果对render阶段和commit阶段不了解的可以查看往期文章

8.render阶段

10.commit阶段

Fiber有比较多的含义，他可以从以下几个角度理解：

• 工作单元 任务分解 ：Fiber最重要的功能就是作为工作单元，保存原生节点或者组件节点对应信息（包括优先级），这些节点通过指针的形似形成Fiber树

• 增量渲染：通过jsx对象和current Fiber的对比，生成最小的差异补丁，应用到真实节点上

• 根据优先级暂停、继续、排列优先级：Fiber节点上保存了优先级，能通过不同节点优先级的对比，达到任务的暂停、继续、排列优先级等能力，也为上层实现批量更新、Suspense提供了基础