（二）fiber的基本认识

news2024/11/25 4:56:34

上一篇文章我们了解了react新老结构的差异以及存在的缺点，其中react的解决方案就是采用fiber架构和添加Schedule模块。

✍️：Schedule模块的主要工作是任务的调度，负责调度不同优先级任务的执行时机，这个我们后面再讲，这里我们先带大家了解认识一下fiber架构

一、前文回顾

上一篇文章我们说到，fiber主要是为了解决构建虚拟DOM过程中无法中断的问题，同时fiber还解决了旧架构递归更新时产生的性能问题。

二、JSX

在了解fiber之前，我们先来认识一个跟fiber有关联的知识，就是JSX，如果你使用过react，那么你肯定使用过JSX这种数据结构，JSX可以让我们以近乎编写JS原生的方式进行编码，而JSX对象会经过babel转换成reactElement这种数据结构，最终通过这种数据结构，生成fiber节点，所以他们两个之间的关系就是：JSX -> fiber，也可以理解成JSX 驱动 fiber。

转换结果

其中key就是我们常用的key属性，props就是我们传入的一些参数，比如经常传递给组件的props，当然如果有子节点的话，那么子节点也会在这个props对象中，key为children。

三、fiber的结构

了解完JSX和fiber的关系后，我们接着来了解一下fiber的具体结构。fiber是react对VDOM的一个实现，其实fiber就是一个JS中的对象，但是这个对象中存在着许多的属性。

了解完大概的结构之后我们来了解一下fiber的含义，这里引用React技术揭秘中的一段解释

Fiber包含三层含义：

1.作为架构来说，之前React15的Reconciler采用递归的方式执行，数据保存在递归调用栈中，所以被称为stack Reconciler。React16的Reconciler基于Fiber节点实现，被称为Fiber Reconciler。
2.作为静态的数据结构来说，每个Fiber节点对应一个React element，保存了该组件的类型（函数组件/类组件/原生组件…）、对应的DOM节点等信息。
3.作为动态的工作单元来说，每个Fiber节点保存了本次更新中该组件改变的状态、要执行的工作（需要被删除/被插入页面中/被更新…）。

四、fiber解决的问题

我们开头说到了，fiber可以解决旧架构存在的性能问题，那么fiber是如何解决的呢？

🙁：我们知道之前的更新是通过递归同步的方式进行更新，也就是说如果有一个地方发生了变化，就会通知渲染器操作DOM节点进行更新，这样就会存在频繁的操作DOM的过程。

😊：而fiber除了支持异步中断更新之外，还更换了一种更新的方式，也就是双缓存更新机制，大概可以理解为react内部会维护两棵树，一颗是当前页面上存在的树，一颗是发生更新时在内存中构建的树，通过指针切换两颗树，从而改变页面上的UI状态，这就是fiber的双缓存机制，也就是fiber的工作机制。这两棵树都是由fiber节点连接形成的树，也可以称为fiber树。

通过这种机制，我们可以不用频繁的去执行DOM操作，我们可以将更新时需要发生变化的地方打上标签，当内存中这颗树构建完成时，我们就可以拿到一颗完整的fiber树，这颗树中记录着需要发生变化的节点，然后统一提交给渲染器一并渲染。