面试官:React为什么要推出Fiber架构?

React为什么要推出Fiber架构,这是一道非常高频的React面试题,但是很多同学在面试时候要么回答不出来,要么回答的不深入。老规矩,点赞收藏支持一下,给我一分钟,理想哥教大家该怎么满分回答这个问题

如果我是求职者,我会这么回答:

React推出Fiber架构是为了解决React中的某些性能问题,并提供一些新的功能。

在React的传统架构中,采用了递归的方式创建虚拟DOM,递归过程是不能中断的。如果组件树的层级很深,递归会占用线程很多时间,因为JS是单线程的,所以当递归占用线程时,UI渲染线程就会一直处于等待中,所以用户会感受到页面卡顿。

为此,React推出了Fiber架构,Fiber 是 React 核心算法的重新实现,Fiber架构中有两个特性:动态优先级和可中断渲染。

其中,动态优先级会给每个任务都分配一个权重值,表示它的优先级。react在协调过程中,会动态调整任务的执行顺序,优先执行优先级高的任务,后执行优先级低的任务,解决了传统架构中所有任务都是相同优先级都是一次性执行的问题,从而提升了性能。

可中断渲染允许React在渲染过程中,对于任务进行暂停,然后适当时机再重启。这样的机制,解决了在传统架构中,因为渲染过程是单次执行不停止,而引发的渲染阻塞页面卡顿问题。

在React Fiber中,渲染过程是分"帧"进行的。当React在执行任务时,如果发现某个任务的执行时间超过了当前帧的剩余时间,它就会暂停执行,将控制权返回给浏览器去执行UI渲染,然后在下一帧继续执行未完成的任务,从而避免阻塞整个 UI。

此外,Fiber架构还提供了许多其他新功能,包括更好的动画支持、更好的浏览器事件处理、更好的同步和异步渲染支持以及更好的可访问性支持。

以上就是这个问题的回答了,大家可以下次面试时试试这么回答看看效果。

最后,关于关注理想哥,每天学点前端面试小技巧。

#前端##前端面试##react#
全部评论
点赞 回复 分享
发布于 11-25 15:17 广东

相关推荐

4 4 评论
分享
牛客网
牛客企业服务