浅入深出react fiber
1.目录
- fiber是什么？
- react已经有了协调
（reconciliation）算法，为什么还要推出fiber架构？ - 从源码层面看fiber是怎么实现的？
2.fiber是什么?
Fiber是React 16新推出的协调引擎，它的主要目标是实现虚拟DOM的增量渲染。（摘自官网）
看了官方的描述，我对fiber还是一知半解，而且还得到了一个新的词语：增量渲染？什么是增量渲染我们后面再说，先来探讨下fiber。
3.React为什么要推出fiber?
在react项目中，如果页面的某个节点发生了变化，react就会重新渲染整个页面，造成比较大的性能损耗。因此官方推出了diff算法，通过对比新/旧VDOM，就能知道哪里的内容变化了，在渲染的时候只需更新变化的部分。
但是，如果我们react的项目非常大。在页面更新，执行VDOM的对比时（深度优先遍历，VDOM同层对比），JS会占据主线程，导致页面无法渲染。此时就会发生页面卡顿（动画卡顿）、页面响应变差（输入框输入迟滞，拖拽页面反应迟钝）等...
3.1 执行JS为什么会造成页面卡顿？
说下浏览器渲染机制，浏览器依靠渲染引擎（注意和JS引擎的区别，JS引擎是运行JS代码的），解析HTML和CSS构建渲染树，再调用GPU接口在屏幕上呈现出一帧帧的图像。所以页面可以看成是一张张的图片（浏览器是有刷新频率的，你的显卡越好，一秒刷新的图片就越多，看着就越流畅，一般一秒刷新60张图就非常流畅了。）。
我们学JS的都知道JS是单线程，而且只有JS主线程能操控渲染引擎。也就是说，JS引擎和渲染引擎其实是共用的一个主线程（一些文章说不是一个线程内实现，我这里以MDN描述为主），因此它们是互斥的，也就是在一个时间点里只能做一件事情。所以当一帧内JS执行时间超过16.7ms（1000ms/60=16.7ms），就没有时间去执行样式布局和样式绘制了，就导致了掉帧。
3.2 什么是深度优先遍历节点？
深度优先的主要思路是从一个顶点开始，沿着一条路一直走到底，然后从这条路回退到上一个节点，再从另一条路开始走到底...，就这样不断的递归重复，直到所有的节点都遍历完成，特点是不撞南墙不回头，如下面这张图，可以当成VDOM的树结构。
深度优先从根节点A开始，找到B，发现B下有节点，找到D，D下面没了再回到B，找到E，E下面没了，回到B，B下面没有除了D和E以外的节点，于是回到A....
2.3 fiber解决了什么问题？
fiber解决了在协调算法中，由于JS代码的执行无法被中断，导致这个过程页面会出现动画卡顿，响应迟滞等诸多问题。具有以下优点：
- 利用浏览器空闲时间执行，不会长时间占用主线程（每一帧16.7ms中，
React预留的初始时间为5ms） - 将VDOM的对比碎片化，也就是
时间切片（也就是将对比分成很多小片段，一个fiber就是最小的片段（或者说叫执行单元），每一帧执行一点点对比。判断浏览器是不是闲着的(window.requestIdleCallback)，如果有页面渲染，就让出主线程等其他任务执行完了，再回来接着更新，最后完成全部对比，再一次性更新到页面的视图上）。 - 将原本同步不可中断的更新，变成
异步可中断更新（可以中断和恢复） - 赋予了不同任务的
优先级，优先级高的先执行（如事件交互、页面拖拽等用户急切想得到反馈的先执行，网络请求回来的数据往后排...）
4.从源码层面理解fiber（TODO）
能回答完上面的，个人感觉应聘中级前端应该没问题了吧！！至于研究源码，可能有些面试官可能自己都没看过...
所以源码的部分，博主也是临时抱佛脚正在看，等的确看明白了再回来写吧，请见谅...
5.补充小知识（持续更新）
5.1 什么是增量渲染？
增量就是一个由小到大，由少到多的过程。
以前的react是深度优先，同步的递归渲染，渲染是一次性的，且程序员没有办法从代码层面上去中断。而react16推出了fiber，将整个渲染任务分解为多个执行单元（小任务），将这些小任务分散到每一帧里面，随着页面一帧一帧的调用，节点对比由少到多完成整个对比，最后再一次性渲染到页面上。
5.2 fiber到底是不是很多博客写的，就是VDOM？
不是vdom，类似vdom。react源码会先将vdom转成对应的fiber，一种类似vdom的结构，一个fiber也是一个对象。但这个对象比vdom上面多了很多属性。
