React_Fiber机制(下)

大家好,我是「柒八九」

前段时间,我们开辟了,「前端框架」的文章系列,首先就介绍了,关于React-Fiber的相关机制。由于文章行文结构所制约下,针对一些边界情况,没有展开介绍。

而今天的这篇文章,就是为了查漏补缺的。有些比较重要的点,可能会再次提出。

好了,「话不多说,开搞」

你能所学到的知识点

  1. React-Fiber是个啥
  2. React旧有的堆栈调和器Stack Reconciler存在什么问题
  3. 页面丢帧的原因
  4. React-Fiber的工作原理

文章概要

  1. React-Fiber是个啥
  2. 堆栈调和器Stack Reconciler
  3. 递归操作
  4. React Fiber 如何工作的

1. React-Fiber是个啥

React Fiber是一个「内部引擎」,旨在使 React 更快、更智能。 ❞

Fiber 调和器Fiber Reconciler成为 React 16+版本的「默认调和器」,它完全重写了 React 原有的调和算法,以解决 React 中一些长期存在的问题。

因为 Fiber 是异步Asynchronous的,React可以:

  • 当新的更新发生时,「暂停」「恢复」「重新启动」组件的渲染工作
  • 「重复使用」以前完成的工作,如果不再需要,甚至可以丢弃它
  • 「工作分成几块」,并根据「重要性」来确定任务的优先次序

❝在「调和」过程中有很多操作, 例如「调用生命周期方法」或者更新ref等。所有这些操作在 Fiber 架构中都被统称为 工作Work。 「工作的类型通常取决于React元素的类型」

这一变化使 React 摆脱了同步堆栈调节器Synchronous Stack Reconciler的限制。以前,你可以添加或删除组件,但「必须等调用堆栈为空,而且任务不能被中断」

使用新的调节器,也「确保最重要的更新尽快发生」。(更新存在优先级)

在了解Fiber 调和器之前,我们先来简单了解下原来的调节算法:「堆栈调和器」


2. 堆栈调和器Stack Reconciler

❝为什么这被称为 "堆栈 "调节器?这个名字来自于 "堆栈 "数据结构,它是一个「后进先出」的机制。 ❞

我们从最熟悉的ReactDOM.render(<App />, document.getElementById('root'))语法开始探索。

ReactDOM 模块将<App/ >传递给调和器,但这里有两个问题:

  • <App />指的是什么?
  • 什么是调和器?

让我们来一一解答这些问题。

<App />指的是什么?

<App />是一个React元素。根据 React博客描述,”元素是一个描述组件实例DOM节点及其所需属性的「普通对象」“。

换句话说,元素「不是实际的DOM节点或组件实例」;它们是一种向 React 描述它们是什么类型的元素,它们拥有什么属性,以及它们的孩子是谁的信息组织方式。

React 元素在早期的React介绍文档中,有另外一个家喻户晓的名字:「虚拟DOMVirtual-DOM」 只不过,V-Dom在理解上在某些场景下会产生歧义,所以逐渐被React 元素所替代 ❞

这就是 React 的真正力量所在。React 将如何构建渲染管理实际DOM树的生命周期的复杂部分「抽象出来」,有效地使开发者的开发变得更容易。

为了理解React 元素所带来的好处,让我们看一下使用面向对象Object-Oriented的传统方法解决一个页面逻辑的开发,到底经历些什么。

React中的OOP(面向对象编程)

在传统的面向对象编程中,开发者必须实例化管理每个DOM元素的生命周期。例如,如果你想创建一个简单的表单和一个提交按钮,它们的状态信息仍然需要开发者来维护。

让我们假设 Button 组件有一个 isSubmitted 「状态变量」Button 组件的生命周期看起来像下面的流程图,其中「每个状态都必须由开发者管理」

流程图的大小代码行数随着状态变量数量的增加而呈「指数级增长」

所以,React 使用元素来解决这个问题;在 React两种元素「DOM元素」「组件元素」

  • 「DOM元素是一个字符串的元素」 例如,<button class="okButton"> OK </button>
  • 「组件元素是一个类或一个函数」 例如,<Button className="okButton"> OK </Button>,其中 <Button>「一个类或一个函数组件」

❝这两种类型都是「简单的对象」。 它们仅仅是对在屏幕上「渲染的内容的描述」,在你创建和实例化它们的时候,「并不会发生渲染操作」。 ❞

React 调和算法Reconciliation

该算法使得 React 更容易解析和遍历应用,用以建立对应的DOM树「实际的渲染工作会在遍历完成后发生」

React 遇到一个类或一个函数组件时,它会基于元素的props来渲染UI视图。

例如,如果<App>组件渲染了以下内容,那么 React 会遍历<Form><Button>组件,它们想根据相应的 props 渲染成什么。

<Form>
  <Button>
    Submit
  </Button>
</Form>

Form 组件是函数组件,React 将调用render()来了解它所要渲染的元素,得知它要渲染一个有孩子节点的<div>

const Form = (props) => {
  return(
    <div className="form">
      {props.form}
    </div>
  )
}

React「重复这个过程」,直到它掌握了页面上与每个组件所对应的DOM元素的相关渲染信息。

❝这种通过「递归元素树」,以掌握React应用的组件树的DOM元素的过程,被称为「调和」。 ❞

在调和结束时,React 知道DOM树的结果,像 react-domreact-native 这些「渲染器」渲染更新DOM节点所需的「最小变化集」。这意味着,当你调用 ReactDOM.render()setState()时,React 就会执行调和处理。

setState 的情况下,它执行了一个遍历,并通过「将新的树与渲染的树进行比较」来确定树中的变化。然后,它将这些变化应用到「当前树」上。

3. 递归操作

在上文介绍「堆栈调和器」中得知,在进行调和处理时,会执行「递归操作」,而递归操作和「调用栈」有很大的关系,进而我们可以得出,递归和「堆栈」也有千丝万缕的联系。

用一个简单的例子,看看在「调用栈」中会发生什么。

function fib(n) {
  if (n < 2){
    return n
  }
  return fib(n - 1) + fib (n - 2)
}

fib(3)

我们可以看到,调用堆栈将对fib()的每一次调用都「推入堆栈」,直到弹出fib(1)(第一个返回的函数调用)。

我们刚才看到的调和算法是一个「纯粹的递归算法」一个更新会导致整个子树立即重新渲染。虽然这很好用,但这也有一些局限性。

❝在用户界面中,「没有必要让每个更新都立即显示」; 事实上,这样做可能会造成浪费,导致「帧数下降并降低用户体验」。 ❞

另外,不同类型的更新「有不同的优先级」--动画更新必须比数据存储的更新完成得快。

页面丢帧dropped frames 问题

帧率Frame Rate

「帧率」是指连续图像出现在显示器上的「频率」。 我们在电脑屏幕上看到的一切都「由屏幕上播放的图像或帧组成,其速度在眼睛看来是瞬间的」。 ❞

可以把电脑显示屏想象成一本书,而书的页面是以某种速度播放的帧。相对而言,电脑显示屏只不过是一本自动翻页书,当屏幕上的事物发生变化时,它就会连续播放。

通常情况下,为了画面流畅和即时,视频的播放速度必须达到「每秒30帧」FPS)左右;任何更高的速度都能带来更好的体验。

现在大多数设备都是以60FPS刷新屏幕,1/60=16.67ms,这意味着「每16ms就有一个新的帧显示」。这个数字很重要,因为如果 React渲染器在屏幕上渲染的时间「超过」16ms,「浏览器就会丢弃该帧」

然而,在现实中,浏览器要做一些「内部工作」,所以你的所有工作「必须在10ms内完成」。当你不能满足这个预算时,帧率就会下降「内容就会在屏幕上抖动」。这通常被称为 jank,它对用户的体验有负面影响。

当然,对于静态和文本内容来说,这并不是一个大问题。但是在显示动画的情况下,这个数字就很关键了。

如果每次有更新时,React 调和算法都会遍历整个App树,并重新渲染,「如果」遍历的时间超过16ms,就会「掉帧」

这也是许多人希望更新按「优先级分类」,而不是盲目地把每个更新都传给「调和器」。另外,许多人希望能够「暂停并在下一帧恢复工作」。这样一来,React可以更好地控制与16ms渲染预算的工作。

这导致React团队重写了调和算法,它被称为Fiber。那么,让我们来看看Fiber是如何解决这个问题的。

4. React Fiber 如何工作的

总结一下实现Fiber所需要的功能

  • 为不同类型的工作分配「优先权」
  • 「暂停工作」,以后再来处理
  • 如果不再需要,就放弃工作
  • 「重复使用」以前完成的工作

实现这样的事情的挑战之一是 JavaScript 引擎的「工作方式」「语言中缺乏线程」。为了理解这一点,让我们简单地探讨一下 JavaScript 引擎如何处理执行上下文。

JavaScript的执行堆栈Execution Stack

每当你在 JavaScript 中写一个函数,JavaScript 引擎就会创建一个函数执行上下文

每次 JavaScript 引擎启动时,它都会创建一个「全局执行上下文」,以保存全局对象;例如,浏览器中的window对象和Node.js中的global对象。JavaScript 使用一个堆栈数据结构来处理这两个上下文,也被称为「执行堆栈」

因此,当存在如下代码时,JavaScript 引擎首先创建一个全局执行上下文,并将其推入执行栈。

function a() {
  console.log("i am a")
  b()
}

function b() {
  console.log("i am b")
}

a()

然后,它为 a()函数创建一个函数执行上下文。由于b()是在a()中调用的,它为b()创建了另一个函数执行上下文,并将其推入堆栈。

b()函数返回时,引擎销毁了b()的上下文。当我们退出a()函数时,a()的上下文被销毁。执行过程中的堆栈看起来像这样。

但是,当浏览器发出像HTTP请求这样的「异步事件」时会发生什么?JavaScript 引擎是储存执行栈并处理异步事件,还是等待事件完成?

JavaScript 引擎在这里做了一些不同的事情:在「执行堆栈的底部」JavaScript 引擎有一个「队列数据结构」,也被称为事件队列Event Queue。事件队列「处理异步调用」

JavaScript 引擎通过等待执行栈清空来处理队列中的项目。所以,每次执行栈清空时,JavaScript 引擎都会检查事件队列,从队列中弹出项目,并处理事件。

❝值得注意的是,只有当「执行栈为空」或者「执行栈中唯一的项目是全局执行上下文」时,JavaScript 引擎才会检查事件队列。 ❞

虽然我们称它们为异步事件,但这里有一个微妙的区别:「事件在到达队列时是异步的,但在实际处理时,它们并不是真正的异步」

回到我们的堆栈调节器,当 React 遍历树时,它在执行堆栈中这样做。所以,当更新发生时,它们会在事件队列中进行「排队」。只有当执行栈清空时,更新才被处理。

这正是Fiber解决的问题,它重新实现了「具有智能功能的堆栈」--例如,暂停、恢复和中止。

Fiber是对堆栈的「重新实现」,专门用于React组件。 可以把一个Fiber看成是一个「虚拟的堆栈框架」。 ❞

重新实现堆栈的「好处」是,你可以把「堆栈帧保留在内存中」,并随时随地执行它们。

简单地说,Fiber代表了「一个有自己的虚拟堆栈的工作单位」。在以前的调和算法的实现中,React 创建了一棵对象树(React元素),这些对象是「不可变」的,并递归地遍历该树。

在当前的实现中,React 创建了「一棵可变的Fiber节点树」Fiber节点有效地持有组件的stateprops和它所渲染的DOM元素。

而且,由于fiber节点可变的,React 「不需要为更新而重新创建每个节点;它可以简单地克隆并在有更新时更新节点」

fiber树的情况下,React 并不执行递归遍历。相反,它创建了一个「单链的列表」,(Effect-List)并执行了一个「父级优先」「深度优先」的遍历。

后记

「分享是一种态度」

参考资料:

  • how-react-fiber-work
  • React官网

原文地址:https://cloud.tencent.com/developer/article/2081782

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom