1、React Fiber的理解

:::info fiber的含义：react16推出的fiber。
本质：fiber是一种基于浏览器的调度算法。

  • 提高浏览器的渲染性能，不让浏览器出现卡顿的现象。
  • 电脑屏幕的刷新率：单位HZ，电脑显示器的频率每秒60HZ，播放电影显示的频率一般是30HZ。

  • 浏览器的刷新频率一般与电脑的刷新频率是保持一致的。

  • JavaScript的执行是单线程的。GUI图像的渲染与Javascript的执行是在同一个线程，并且是互斥的关系。如果javascript一直在执行的话，我们的GUI将得不到渲染。屏幕将会保持上一帧的图像，切换到下一帧的时间就会很长，用户就会感受到明显的卡顿。简单的来说，就是javascript的执行时间太长，阻塞了GUI图像的渲染，导致页面中的图像就会卡在上一帧，页面会出现卡顿的现象。这个单线程还要执行用户的响应操作，用户事件的响应，键盘的事件执行，javascript代码的执行，布局layout、绘制paint都是在这个单线程中执行。需要在每一帧都完成上述的任务。意味着如果有一个操作占据的时间太长，那么屏幕刷新的下一帧的时间就会过长，屏幕就会出现明显的卡顿现象。

  • 上面出现比较耗时的操作，这时候 React中就出现了reconciliation（调度者），这个调度者就会将我们的任务进行分割成fiber碎片, 让浏览器执行页面的渲染，页面渲染完毕后，出现空闲的时间再来执行fiber碎片，fiber是执行单元。当我们的设备频率为60HZ的时候，每帧执行的时间为16.6ms，假如浏览器这一帧渲染的时间占用了10ms，那么剩余的6.66毫秒，将会执行我们的fiber碎片。6.66毫秒执行完毕再将我们的控制权交还给浏览器。浏览器下一帧继续上一次的操作。绘制下一帧的图像 。一旦有空余的时间，再来执行这些fiber碎片任务。

  • reconciliation调度将协程分成很多的碎片，一旦有空余的时间，就会来执行这个fiber碎片。如果没有时间的话，先记录当前任务执行的位置，一旦有空余的时间，继续上一次的执行。 ::: :::success 总结：⽽React fiber的核⼼⽬的就是为了使React 渲染的过程可以被中断，可以将控制权交回给浏览器，让位给⾼优先级的任务-比如页面渲染，等待浏览器空闲后再恢复执行其他的js任务。

  • 这样的话，对于高性能要求的一些dom计算在设备上就不会显得卡顿，而是会一帧一帧有规律的执行。

  • 再次强调：浏览器一帧内都要做什么事情？
    • 处理用户输入事件、键盘事件、鼠标事件
    • Javascript任务执行
    • requestAnimation调用
    • 页面布局layout
    • 页面绘制paint
  • 只有完成了这些本职的工作后，剩余的时间才是空闲的时间，也就是执行我们requestIdleCallback回调函数的时间。
  • 浏览器很忙怎么办？
    • 浏览器可能一直很忙，忙到即使每一帧都没空去执行requestIdleCallback，那咋们的回调函数，岂不是永远无法执行了？
    • 放心，浏览器给我们提供一个timeout参数，当超过这个超时时间并且回调还没有执行的时候，在下一帧这个回调会被强制执行。

requestIdleCallback兼容性很差，通过messageChannel模拟实现了requestIdleCallback的功能
timeout超时后就一定会被执行吗？
task-任务1 console.log() 打印 不是特别的紧急
task-任务2 ajax请求
requestIdkeCallback timeout 100ms
不是的，react 里预约了5个优先级的登记

  • Immediate 最高优先级(必须要执行的)，这个优先级的任务应该被马上执行不能中断;
  • UserBlocking 这些任务一般是用户交互的结果，需要及时得到反馈;
  • Normal 不需要用户立即就感受到的变化，比如网络请求;
  • Low 这些任务可以延后，但是最终也需要执行;
  • Idle 可以被无限期延后; :::

2、hook的原理