react为何采用fiber架构

Posted 2021-10-05 Charon

这里要对比一下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...