React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Fiber面试技术

React Fiber中面试官最关心的技术话题

作者:沐华

这篇文章主要为大家介绍了React Fiber中面试官最关心的技术话题解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

引言

关于 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 开发者有在源码里回答过:

所以就自己实现一个完全可控的

怎么判断当前是否有高优先级的任务

这个据我所知 JS 好像没法判断,而是按帧的时间,如果一帧内任务还没执行完,就中断当前任务,把控制权交给浏览器

浏览器什么时候才有空呢

每秒60帧算,每帧就是 1000/60 = 16.7ms 差不多,每帧任务执行完会调 requetIdleCallback(callback),并且在 callback 中会有一个参数告诉我们当前帧还有多少时间给我们执行任务

那浏览器一帧内要做哪些事情

比如布局(layout)、绘制(paint)、JS 的执行、处理用户输入事件、requestAnimation 调用等,如果在一帧内处理完了这些剩余时间就用来执行 requetIdleCallback,直到下一帧开始

requetIdleCallback(callback, options),还有第二个参数,里面有个 timeout 字段(毫秒),如果超过这个时间还没有被执行的话,那么下一帧就会强制执行

也不一定,React 里有 5 个优先级的等级,高优先级的会被优先执行,低优先级的慢慢等下去,等级是这样的

如果是相同优先级的任务,就会按推入任务队列的顺序来执行

兼容性怎么样

requetIdleCallback 兼容性是很差的,React 也是通过 messageChannel 模拟实现的 requetIdleCallback 的功能

除了 MessageChannel 还有没有其他类似方法

还有一个功能类似的 BroadcastChannel

以上就是React Fiber中面试官最关心的技术话题的详细内容,更多关于React Fiber面试技术的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文