react为什么采用fiber架构

这里要对比一下stack和fiber架构的不一样以及react在fiber架构作了那些更改

这里说到了react16使用了fiber,那咱们看下16以前输入stack架构的实现的问题，提及React算法架构避不开“Reconciliaton”。

Reconciliation

React 官方核心算法名称是 Reconciliation ， 中文翻译是“协调”！[React diff 算法的实现就与之相关。
稍微了解浏览器加载页面原理的前端同窗都知道网页性能问题大都出如今DOM节点频繁操做上；
而React经过“虚拟DOM” + React Diff算法保证了前端性能

传统Diff算法

经过循环递归对节点进行依次对比，算法复杂度达到 O(n^3) ，n是树的节点数，这个有多可怕呢？——若是要展现1000个节点，得执行上亿次比较。。即使是CPU快能执行30亿条命令，也很难在一秒内计算出差别。

React Diff算法

将Virtual DOM树转换成actual DOM树的最少操做的过程 称为 协调（Reconciliaton）。
React Diff三大策略 ：

• tree diff
• component diff
• element diff

在V16版本以前 协调机制 是 Stack reconciler， V16版本发布Fiber 架构后是 Fiber reconciler。

咱们先说Stack reconciler存在的问题:
在setState后，react会当即开始reconciliation过程，从父节点（Virtual DOM）开始递归遍历，以找出不一样。将全部的Virtual DOM遍历完成后，reconciler才能给出当前须要修改真实DOM的信息，并传递给renderer，进行渲染，而后屏幕上才会显示这次更新内容。

对于特别庞大的DOM树来讲，reconciliation过程会很长(x00ms)，在这期间，主线程是被js占用的，所以任何交互、布局、渲染都会中止，给用户的感受就是页面被卡住了。

在这里咱们想解决这个问题的话,来引入一个概念,就是任务可中断,以及任务优先级,也就是说咱们的reconciliation的过程当中会生成一些任务和子任务,用户的操做的任务优先级是要高于reconciliation产生的任务的,也就是说用户操做的任务是能够打断reconciliation中产生得任务的,它会优先执行.

Fiber reconciler

原来的React更新任务是采用递归形式，那么如今若是任务想中断， 在递归中是很难处理， 因此React改为了大循环模式，修改了生命周期也是由于任务可中断。

Fiber reconciler 使用了scheduling(调度)这一过程， 每次只作一个很小的任务，作完后可以“喘口气儿”，回到主线程看下有没有什么更高优先级的任务须要处理，若是有则先处理更高优先级的任务，没有则继续执行(cooperative scheduling 合做式调度)。

因此Fiber 架构就是用 异步的方式解决旧版本 同步递归致使的性能问题。

本文借鉴于
https://segmentfault.com/a/11...