react 循环_[React] 6 - React16 Fiber 基于浏览器的单线程调度算法

最新推荐文章于 2022-04-23 22:00:09 发布

weixin_39931923

最新推荐文章于 2022-04-23 22:00:09 发布

阅读量94

点赞数

文章标签： react 循环

小白读大佬的文章:

程墨Morgan：React Fiber是什么
司徒正美：React Fiber架构
完全理解React Fiber | 黯羽轻扬

本质是: React将底层的树结构 , 递归遍历, 变为链表结构, 循环遍历。
递归是无法随时停止的，也可以说无法停止。
但是循环可以啊~  所以 Fiber 链表 调度就出现了。

1. 背景

【解决】 
React15的性能问题.

【问题出现原因】
加载或更新组件的时候，需要调用生命周期
计算VNode, diff, 更新DOM
整个过程是同步的。也就是说，一路狂奔下去。
当这个树非常的旁边 ，问题就来了。
因为JS是单线程，当有200个组件，主线程会专心做更新的事情，一路狂奔下去。
这段时间，用户输入input操作是不会被响应的。
因为此时主线程被React霸占着。等到React更新后，咔咔咔的用户输入的操作被执行了。


【RECAP】 
更新占用主线程, 不更新完不罢休, 这样就导致更高优事件无法被执行。
因为更新过程是同步地一层组件套一层组件，逐渐深入的过程，
在更新完所有组件之前不停止，函数的调用栈调用得很深，而且很长时间不会返回。

2. 解决

【Fiber】 
本质上是对 调用的一个优化。分片，就是大的任务分成小的 一步步的解决。

【例如】
主线程需要100ms执行，分成10个任务，每个任务是10ms, 
当一个任务执行完成后，会有另外更高优任务执行，这样不会出现主线程任务一直被霸占着。

每个任务Fiber都有时间分片: 
A任务执行到一半的时候，发现调用了组件componentWillUpdate 方法，
接下来发现自己的时间分片已经用完了。
出去看看有没有更高优先的任务，发现B更高优。

即使A没有执行完，也会交给B。
B完成后，A重新再执行。
这就是为什么你打印console.log发现，有的时候会print出来多次。