React Fiber怎样工作的,原理是什�
Admin 2022-10-21 群英技术资�
React Fiber,简单来说就是一个从React v16开始引入的新协调引擎,用来实现Virtual DOM的增量渲染�
说人话:就是一种能让React视图更新过程变得更加流畅顺滑的处理手法�
我们都知道:进程大,线程小。而Fiber(纤维)是一种比线程还要细粒度的处理机制。从这个单词也可以猜测:React Fiber会很“细”。到底怎么个细法,我们接着往下看�
之前说了,React Fiber是为了让React的视图更新过程变得更加流畅顺滑。怎么,之前React的视图更新不流畅,不顺滑了?
还真是的,在React v16之前,React的视图更新确实存在很大的性能问题,其中首当其冲的,就是它的同步更新机制�
在React决定要加载或更新一颗组件树之前,会大致做出如下一系列动作:调用各组件的生命周期函� --> 计算和对比Virtual DOM --> 更新真实的DOM树。这个过程是同步的,也就是说,一旦这个过程开始,它就会一鼓作气跑完,一直到真实DOM树更新完毕�
然而,当组件树比较庞大时,这种机制的问题就来了:一颗拥�300个组件的组件树需要全部更新,假设一个组件更新只需耗时1ms,整棵树更新一次就需要耗时300ms。在�300ms期间,浏览器的主线程一直在“专心致志”地忙着更新这颗组件树(这时函数的调用栈会非常长),对于页面上的任何操作都是“不闻不问”的。在这期间,假如用户在一个输入框敲了几个字,页面上也不会有任何反应,因为渲染按键输入结果也需要主线程来做,然而此时主线程正忙着更新组件树呢。等�300ms结束了,浏览器主线程有空了,才把刚刚敲的那几个字渲染到input输入框内�
太卡了,真的�
由于JavaScript的单线程工作特点,业内一直有个这样的原则:任何动作都不要长时间霸占主线程,如果迟迟不归还主线程,那么在这期间程序就没法对其他输入作出响应。输入了却没有响应,或者说响应来的很慢,也就是我们常常说的“卡顿”。显然,React的同步更新机制在组件树庞大时就违反了这一原则,犯了大忌�
这就是React Fiber出现的原因:为了解决旧版React视图更新的性能瓶颈�
首先,React Fiber并没有解决更新庞大组件树耗时长的问题,实际上总的耗时还是一样的长。但是它解决了一个被广大开发者口诛笔伐的恶行:长时间霸占主线程不放�
而它解决的方法就是:分片�
它的工作原理是这样的:把耗时长的更新任务拆解成一个个小的任务分片,每执行完一个小的任务分片,都归还一次主线程,看看有没有什么其他紧急任务要做。如果在归还主线程时恰巧发现有紧急任务,那么会马上停掉当前更新任务,转而让主线程去做紧急任务,等主线程做完紧急任务,再重新做更新任务。(注意️:是重新!不是从上次被打断的点继续);如果没有紧急任务,才敢唯唯诺诺地继续做接下来的任务分片�
简单来说,就是降了视图更新的优先级,把更新过程碎片化�
现在我们捋一捋,React Fiber会这样处理一个更新过程:
React Fiber实现的难点有两个:暂�/重启如何实现?任务如何分散执行?
对于前者,暂停/重启意味着我们需要保存状态,这里在实现上用到了具有链表和指针的“单链表树遍历算法”,能够记录遍历过程中的上一步和下一步�
而对于后者,则用到了requestAnimationFrame
�requestIdelCallback
这两个API,其�requestAnimationFrame
是浏览器在每一帧都一定会执行的,可以放一些高优先级的任务;�requestIdelCallback
则是浏览器在一帧中最后如果有空闲时间才会去执行,可以放一些低优先级的任务,需要polyfill(因为兼容性不佳)�
React Fiber在Reconciliation阶段可能会调用以下生命周期函数(这也意味着在这个阶段的生命周期函数在一次加载和更新过程中可能会被多次调用)�
componentWillMount
componentWillUpdate
componentWillReceiveProps
shouldComponentUpdate
如果你恰巧没有上react hooks的车,而是使用传统的类组件进行开发,那么切记,不要在以上几个生命周期函数中做只需要做一次的操作(比如:页面初始化时发起一个ajax请求获取数据)�
如果你平常使用react hooks进行开发,那没事了,就当看了个热闹�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章介绍了Node.js实现压缩与解压数据的方法,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
今天给大家分享的是JS如何提高开发效率的内容,其实有很多JavaScript技巧可以帮助我们提高开发的效率,接下来小编就给大家分享一下比较实用的技巧,感兴趣的朋友就继续往下看吧�
数组在JavaScript中经常使用,如何对数组进行增删改非常重要,下面为数组的常用方�
windows下安装Node出现报错2503怎么解决?有一些朋友就有遇到node安装失败2503报错的问题,那么究竟我们该怎么办呢?下文给大家分享了一个解决方法,操作如下,大家可以了解看看,希望能帮助到大家�
这篇文章主要为大家详细介绍了vue+ts实现元素鼠标拖动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078