react-fiber 学习

一：fiber存在的意义。

为了解决react15之前虚拟dom递归渲染导致的掉帧问题。

二：fiber是什么

关于fiber数据结构，我在虚拟dom一文其实也简单提到过，每一个被创建的虚拟dom都会被包装成一个fiber节点，它具备如下结构：

const fiber = {
    stateNode,// dom节点实例
    child,// 当前节点所关联的子节点
    sibling,// 当前节点所关联的兄弟节点
    return// 当前节点所关联的父节点
}

这样设计的好处就是在数据层已经在不同节点的关系给描述了出来，即便某一次任务被终止，当下次恢复任务时，这种结构也利于react恢复任务现场，知道自己接下来应该处理哪些节点。

react中的fiber其实具备如下几点核心特点：

一、支持增量渲染，fiber将react中的渲染任务拆分到每一帧。（不是一口气全部渲染完，走走停停，有时间就继续渲染，没时间就先暂停）
二、支持暂停，终止以及恢复之前的渲染任务。（没渲染时间了就将控制权让回浏览器）
三、通过fiber赋予了不同任务的优先级。（让优先级高的运行，比如事件交互响应，页面渲染等，像网络请求之类的往后排）
四、支持并发处理（结合第3点理解，面对可变的一堆任务，react始终处理最高优先级，灵活调整处理顺序，保证重要的任务都会在允许的最快时间内响应，而不是死脑筋按顺序来）

fiber是怎么做到让出控制权的呢？react又是怎么知道接下来自己可以执行的呢？那接下里，我们就不得不介绍另一个API requestIdleCallback。

关于requestIdleCallback

**window.requestIdleCallback()**方法插入一个函数，这个函数将在浏览器空闲时期被调用。这使开发者能够在主事件循环上执行后台和低优先级工作，而不会影响延迟关键事件，如动画和输入响应。

与requestAnimationFrame类似，requestIdleCallback也能接受一个callback，而这个callback又能接收一个由浏览器告知你执行剩余时间的参数IdleDeadline，我们来看个简单的例子：

const process = (deadline) => {
  // 通过deadline.timeRemaining可获取剩余时间
  console.log('deadline', deadline.timeRemaining());
}
window.requestIdleCallback(process);

参考文献： 【react】什么是fiber？fiber解决了什么问题？从源码角度深入了解fiber运行机制与diff执行_react fiber-CSDN博客