react 之 fiber 架构-编程知识

react 之 fiber 架构

news/2024/12/21 20:05:19/文章来源:https://www.cnblogs.com/xxflz/p/18447732

一、为什么要用 fiber架构

　在react16 之前，react是用 diff 算法对vitrulDom进行对比更新渲染，这种 diff 算法对比如果遇到需要大量时间执行的方法任务时，就会造成页面卡顿

二、什么是 fiber 架构

　fiber架构简单点说就是任务切片（一个耗时任务在浏览器空闲时，分多次执行），这样就在用户感官上页面流畅不卡顿

浏览器卡顿判断标准：

正常情况下人眼感受到的每秒 60帧，也就是16.6ms/帧，如果超过超过这个值，就会感受到卡顿，如果说某个任务耗时超过16.6ms就会造成页面暂时卡顿

fiber怎么做：

fiber 架构会把一个要耗时任务会分解成无数个执行只需大概5ms的任务片段，在浏览器空闲时执行

如何判断浏览器是否空闲：

浏览器有个API叫 requestIdleCallback

requestIdleCallback回调函数: 回调函数是在主线程空闲时被调用的函数。每次调用时，都会传入一个IdleDeadline对象，该对象提供一个timeRemaining()方法，用来检测当前帧中剩余的空闲时间。

注意：requestIdleCallback 是一个宏任务，在事件列表中是最后执行的

but！！！react 并没有使用浏览器原生的 requestIdleCallback 方法（因为浏览器兼容，目前只要chorm支持）

react 而是用了 MessageChannel 进行任务调度

什么是 MessageChannel？

MessageChanne设计初衷是为了方便我们在不同的上下文之间进行通讯，例如web Worker,iframe
它提供了两个端口（port1 和 port2），通过这些端口，消息可以在两个独立的线程之间双向传递

const channel = new MessageChannel();
const port1 = channel.port1;
const port2 = channel.port2;// 设置 port1 的消息处理函数
port1.onmessage = (event) => {console.log('Received by port1:', event.data);port1.postMessage('Reply from port1'); // 向 port2 发送回复消息
};// 设置 port2 的消息处理函数
port2.onmessage = (event) => {console.log('Received by port2:', event.data);
};// 通过 port2 发送消息给 port1
port2.postMessage('Message from port2');