关于源码分析: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...