关于前端:React-Fiber技术解读你需要知道面试官最关心的话题

大家好，我是沐华。对于 React Fiber 进去也有几年了，可最近面试多了才发现，还是有很多人只知其一; 不知其二，所以本文梳理了一下无关 Fiber、以及这个话题环环相扣，能够延长的点，给大家面试温习、查缺补漏，如果你是面试官也可间接拿去发问

是指工夫分片嘛，能够把渲染工作切片，优化渲染性能的。

因为 React 是函数式编程嘛，单向数据流，须要手动 setState 来更新，所以当数据扭转时会默认全副从新渲染整个组件树，而构建虚构 DOM 则是采纳同步递归的形式，如果组件很简单且嵌套深，那么这个构建虚构 DOM 的过程就须要很多工夫，而这种工作默认要执行完才会把控制权交给浏览器，一旦执行工夫很长，可能就会地把浏览器卡死。

尽管能够用 pureComponent/shouldComponentUpdate/useMemo/useCallback 等办法来进行管制局部更新或缓存，但也是治标不治本。而 fiber 是能够使渲染过程被中断，能够把控制权先交还给浏览器，让位高优先级的工作，等浏览器闲暇时再复原渲染，这样就不会显得卡顿，而是一帧一帧有法则的执行工作，看起来尽管有点慢，然而始终在缓缓执行的

就像一个房子，组件层级就像房子的楼层，然而每一层房子顶都破了很多个洞的，那几个办法就像一片瓦，都能盖一个小洞，但稍不留神少盖一个房间就会漏水，房间里的人 (用户) 就能感知到(卡)，而 fiber 就像在破洞上面放了根水管间接通到屋外，尽管看起来水管弯弯绕绕的，水落地的工夫慢了(执行工夫长了)，但房间里的人，就感觉不到漏水了(屋子还是个破屋子)

切实是因为 React 没方法在编译阶段优化更多了，所以采纳这种形式来补救挫伤

次要是通过两个原生的 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()

这个问题 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 的性能

还有一个性能相似的 BroadcastChannel

如果本文对你有一点点帮忙，点个赞反对一下吧，你的每一个【赞】都是我创作的最大能源 ^\_^

更多前端文章，或者退出前端交换群，欢送关注公众号【沐华说技术】，大家一起独特交换和提高呀

关于前端:React-Fiber技术解读你需要知道面试官最关心的话题

React Fiber

说一下 React Fiber

那 React Fiber 是怎么实现的

还有其余形式能实现吗

为什么不间接用 generator

怎么判断以后是否有高优先级的工作

浏览器什么时候才有空呢

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

如果浏览器很忙，一帧完结了还没执行怎么办

就是说超时后肯定会被执行咯

兼容性怎么样

除了 MessageChannel 还有没有其余相似办法

结语