React Fiber

首先Fiber是React 16过后，React团队重写了React架构，然后这个Fiber才问世的。

React团队重写了React 的核心算法---reconciliation,一般将之前的算法叫stack reconciliation，现在的叫fiber reconciliation。

一、React V15.x 版本存在的问题

在页面元素很多，且需要频繁刷新的场景下，React V15.x 会出现掉帧的现象。

image.png

从这个图可以看到明显的掉帧现象。
浏览器一帧差不多为16ms，浏览器有一个渲染进程，渲染进程启动后，会开启一个渲染主线程。主线程负责执行HTML、CSS、JS代码。

HTML、CSS、JS执行是互斥的关系。如果JS运算持续占用主线程，页面就没法得到及时的更新。当我们调用setState更新页面的时候，React会遍历应用的所有节点，计算出差异，然后再更新UI。整个过程是不能被打断的。如果页面元素很多，整个过程占用的时机就可能超过16ms，就容易出现掉帧的现象。

二、如何解决（React Fiber）

image.png

解决主线程长时间被 JS 运算占用这一问题的基本思路，是将运算切割为多个步骤，分批完成。也就是说在完成一部分任务之后，将控制权交回给浏览器，让浏览器有时间进行页面的渲染。等浏览器忙完之后，再继续之前未完成的任务。

React将任务分成小片，在一小片段的时间内运行这些分片任务，让主线程做优先级更高的事情，如果有任何待处理的事情，就回来完成工作。一个Fiber就是一个工作单元， React 的一个核心概念是 UI 是数据的投影 ，组件的本质可以看作输入数据，输出UI的描述信息（虚拟DOM树）

ui = f(data)

也就是说，渲染一个 React app，其实是在调用一个函数，函数本身会调用其它函数，形成调用栈，递归调用导致的调用栈我们本身无法控制， 只能一次执行完成。而 Fiber 就是为了解决这个痛点，可以去按需要打断调用栈，手动控制 stack frame——就这点来说，Fiber 可以理解为 virtual stack frame。

旧版 React通过递归的方式进行渲染，使用的是 JS 引擎自身的函数调用栈，它会一直执行到栈空为止。而Fiber实现了自己的组件调用栈，它以链表的形式遍历组件树，可以灵活的暂停、继续和丢弃执行的任务。实现方式是使用了浏览器的requestIdleCallback这一 API。