大家好,我是沐华。关于 React Fiber 出来也有几年了,可最近面试多了才发现,还是有很多人一知半解,所以本文梳理了一下有关 Fiber、以及这个话题环环相扣,可以延伸的点,给大家面试复习、查缺补漏,如果你是面试官也可直接拿去提问
React Fiber
说一下 React Fiber
是指时间分片嘛,可以把渲染工作切片,优化渲染性能的。
因为 React
是函数式编程嘛,单向数据流,需要手动 setState
来更新,所以当数据改变时会默认全部重新渲染整个组件树,而构建虚拟 DOM
则是采用同步递归的方式,如果组件很复杂且嵌套深,那么这个构建虚拟 DOM
的过程就需要很多时间,而这种任务默认要执行完才会把控制权交给浏览器,一旦执行时间很长,可能就会地把浏览器卡死。
虽然可以用 pureComponent
/shouldComponentUpdate
/useMemo
/useCallback
等方法来进行控制部分更新或缓存,但也是治标不治本。而 fiber
是可以使渲染过程被中断,可以把控制权先交还给浏览器,让位高优先级的任务,等浏览器空闲时再恢复渲染,这样就不会显得卡顿,而是一帧一帧有规律的执行任务,看起来虽然有点慢,但是一直在慢慢执行的
就像一个房子,组件层级就像房子的楼层,但是每一层房子顶都破了很多个洞的,那几个方法就像一片瓦,都能盖一个小洞,但稍不注意少盖一个房间就会漏水,房间里的人(用户)就能感知到(卡),而 fiber
就像在破洞下面放了根水管直接通到屋外,虽然看起来水管弯弯绕绕的,水落地的时间慢了(执行时间长了),但房间里的人,就感觉不到漏水了(屋子还是个破屋子)
实在是因为 React
没办法在编译阶段优化更多了,所以采用这种方式来弥补伤害
那 React Fiber 是怎么实现的
主要是通过两个原生的 API
来实现的 requestAnimationFrame
和 requestIdleCallback
显示器每秒 60
帧我们看着才不会感觉到卡嘛,比如动画的时候,一帧的时间内布局和绘制结束,还有剩余时间,JS
就会拿到主线程使用权,如果 JS
某个任务执行过长,动画下一帧开始时 JS
还没有执行完,就会导致掉帧,出现卡顿。
所以就通过把 JS
任务分成更小的任务块,分到每一帧上的方式,一帧时间到先暂停 JS
执行,然后下一帧绘制任完成再把主线程交给 JS
,在每一帧绘制之前调用 requestAnimationFrame
;在每一帧空间阶段,就是一帧动画任务完成,下一帧还没到开始时间,这中间还有时间的话就调用 requetIdleCallback
,执行它里面的任务
还有其他方式能实现吗
函数式编程嘛,generator
就可以控制函数的运行过程中断和恢复,就像这样:
// 任务列表
const tasks = []
function * run () {
let task
while(task = task.shift()) {
// 如果有高优先级的任务
if (hasHighPriorityTask()) {
// 中断
yield
}
}
}
// 中断后恢复
const iterator = run()
// 这样就恢复了
iterator.next()
为什么不直接用 generator
这个问题 React
开发者有在源码里回答过:
- 一是因为
React
是迭代的,而使用generator
+yield
的话需要把所有代码都包装成这个形式,非常麻烦,工作量很大 - 二是
generator
内部是有状态的,比如一个函数里有用到多个yield
中断,就像await
一样,有时候后面的会依赖前面的结果,可当后面的执行前,前面的又更新了,后面就无法拿到最新的值,这样就不可控了
所以就自己实现一个完全可控的
怎么判断当前是否有高优先级的任务
这个据我所知 JS
好像没法判断,而是按帧的时间,如果一帧内任务还没执行完,就中断当前任务,把控制权交给浏览器
浏览器什么时候才有空呢
每秒60帧算,每帧就是 1000/60 = 16.7ms
差不多,每帧任务执行完会调 requetIdleCallback(callback)
,并且在 callback
中会有一个参数告诉我们当前帧还有多少时间给我们执行任务
那浏览器一帧内要做哪些事情
比如布局(layout
)、绘制(paint
)、JS
的执行、处理用户输入事件、requestAnimation
调用等,如果在一帧内处理完了这些剩余时间就用来执行 requetIdleCallback
,直到下一帧开始
如果浏览器很忙,一帧结束了还没执行怎么办
requetIdleCallback(callback, options)
,还有第二个参数,里面有个 timeout
字段(毫秒),如果超过这个时间还没有被执行的话,那么下一帧就会强制执行
就是说超时后一定会被执行咯
也不一定,React
里有 5
个优先级的等级,高优先级的会被优先执行,低优先级的慢慢等下去,等级是这样的
Immediate
: 最高优先级,会马上执行的不能中断UserBlocking
: 这一般是用户交互的结果,需要及时反馈Normal
: 普通等级的,比如网络请求等不需要用户立即感受到变化的Low
: 低优先级的,这种任务可以延后,但最后始终是要执行的Idle
: 最低等级的任务,可以被无限延迟的,比如console.log()
如果是相同优先级的任务,就会按推入任务队列的顺序来执行
兼容性怎么样
requetIdleCallback
兼容性是很差的,React
也是通过 messageChannel
模拟实现的 requetIdleCallback
的功能
除了 MessageChannel 还有没有其他类似方法
还有一个功能类似的 BroadcastChannel
结语
如果本文对你有一点点帮助,点个赞支持一下吧,你的每一个【赞
】都是我创作的最大动力 _
更多前端文章,或者加入前端交流群,欢迎关注公众号【沐华说技术
】,大家一起共同交流和进步呀