react-fiber

参考

https://juejin.cn/post/7258071726227849277?searchId=20240704152643B8CDA80EA7A9A4A0DCA9#heading-26

https://juejin.cn/post/7182382408807743548?searchId=20240704152643B8CDA80EA7A9A4A0DCA9#heading-13

为什么会有fiber的概念

1、众所周知，react是有虚拟dom的概念的，如果新旧虚拟dom比对时间过长，占据着浏览器，这时候如果用户和页面进行交互会有卡顿的现象

2、这个时候就需要有个技术或者是个思想来解决这个问题，fiber就应运而生了

fiber是怎么工作的

大家都知道，页面是一帧一帧绘制出来的，当每秒绘制的帧数达到60时，页面是流畅的，小于这个值的时候是卡顿的，转换成时间就是16ms(1000/60)内执行的任务如果没有完成就会有卡顿

1、fiber是实现了一个基于优先级和requestIdleCallback(执行的前提条件是当前浏览器处于空闲状态) 的一个循环调度算法

2、fiber在渲染页面、diff阶段将任务拆分成多个小任务，这些小任务是分优先级的，并且可中断

3、执行的过程就是，每处理完一个任务单元，若还有足够的时间就继续做下一个小任务，没有就把时间交还给浏览器

4、不同任务的执行时间按照其优先级来，优先级高的先执行

• Immediate: 最高优先级, 会马上执行的不能中断
• UserBlocking: 这一般是用户交互的结果, 需要及时反馈
• Normal: 普通等级的, 比如网络请求等不需要用户立即感受到变化的
• Low: 低优先级的, 这种任务可以延后, 但最后始终是要执行的
• Idle: 最低等级的任务, 可以被无限延迟的, 比如 console.log()

Fiber是纤程，比线程更精细，表示对渲染线程实现更精细的控制

应用目的
实现增量渲染，增量渲染指的是把一个渲染任务分解为多个渲染任务，而后将其分散到多个帧里。增量渲染是为了实现任务的可中断、可恢复，并按优先级处理任务，从而达到更顺滑的用户体验

Fiber的可中断、可恢复怎么实现的

fiber是协程，是比线程更小的单元，可以被人为中断和恢复，当react更新时间超过1帧时，会产生视觉卡顿的效果，因此我们可以通过fiber把浏览器渲染过程分段执行，每执行一会就让出主线程控制权，执行优先级更高的任务

fiber是一个链表结构，它有三个指针，分别记录了当前节点的下一个兄弟节点，子节点，父节点。当遍历中断时，它是可以恢复的，只需要保留当前节点的索引，就能根据索引找到对应的节点

带来的影响

由于 Fiber 采用了全新的调度方式, 任务的更新过程可能会被打断, 这意味着在组件更新过程中, render及其下面几个生命周期函数可能会被调用多次, 所以这几个生命周期函数中不应出现副作用:

同时考虑到 componentWillMount componentWillReceiveProps componentWillUpdate 这几个生命周期经常被误用, 所以干脆就废弃了, 同时新增了几个生命周期用于替代(这里具体可参考上文中, 生命周期部分)。

• shouldComponentUpdate
• componentWillMount(UNSAFE_componentWillMount)
• componentWillReceiveProps(UNSAFE_componentWillReceiveProps)
• componentWillUpdate(UNSAFE_componentWillUpdate)