深入了解React之Fiber

介绍

React 16种加入的新的react核心算法。也可理解为虚拟堆栈帧。

Fiber的驱动理念

  1. 在UI中,不必立即应用每个更新,这样做可能会浪费,导致丢帧并降低用户体验
  2. 不同类型的更新具有不同的优先级,动画更新需要比数据存储更新更快地完成
  3. 基于推送的方法需要开发者决定如何安排工作,基于拉取的方法允许框架变得聪明并为你做出决策

什么是fiber(重要)

使React能够实现调度(scheduling),具体如下

  1. 暂停工作,稍后再回来
  2. 为不同类型的工作分配优先权
  3. 重用以前完成的工作
  4. 如果不再需要,则中止工作

为了做到这一点,我们首先需要一种将工作分解为单元的方法,这种方法,就可以称之为Fiber。
在处理UI时,问题在于如果同时执行太多工作,则可能导致动画丢帧并且看起来不稳定。更重要的是,如果它被更新的更新取代,那么其中一些工作可能不是必要的。这是ui组件和funtion之间的差异,因为组件比一般的功能有更多特定的关注点。

有2个api实现了有助于解决这个问题的api

  • requestIdleCallback,调度在空闲期间调用的低优先级函数
  • requestAnimationFrame,调度在下一个动画帧上调用的高优先级函数

所以,为了使用这些API,需要一种方法将渲染工作分解为增量单元。如果仅依赖于调用堆栈,它将持续工作直到堆栈为空。

如果我们可以自定义调用堆栈的行为以优化渲染UI,随意终端调用堆栈并手动操作对战阵,那不是很好吗?这就是React Fiber的目的。

Fiber是堆栈的重新实现,专门用于React组件,可以将单根fiber视为虚拟堆栈帧。
重新实现堆栈的优点是,你可以将堆栈帧保留在内存中,然后想执行的时候就执行它们。这对于实现我们的调度目标至关重要。除了调度之外,手动处理堆栈帧还可以释放并发和错误边界等功能。

fiber的结构

fiber是一个javascript对象,里面包含有这些属性

type和key

从ReactElements复制过来,用途也一样

child和sibling

指向其他的fiber,描述fiber的递归树结构

return

返回父fiber

pendingProps和memoizedProps

是一个function的参数。在执行开始前,设置pendingProps,在结束时设置memoizedProps。当传入的pendingProps和memoizedProps相等时,表示fiber先前的输出可以重复使用,从而防止不必要的工作。

pendingWorkPriority

一个代表fiber工作优先级的数字

alternate

flush
将fiber呈现在屏幕上

work-in-process
未完成的fiber。

当前fiber的备用是work-in-process
work-in-process的替代是当前fiber
使用cloneFiber函数创建fiber,而不是总是创建一个新对象,cloneFiber将尝试重用Fiber的备用,如果它存在,最小化分配(最新代码库中没有找到)

output

告诉渲染器需要更改的部分

坚持原创技术分享,您的支持将鼓励我继续创作!