# 一前言

在之前的很多章节中，我们都提到了 React fiber ，理解 fiber 是吃透 React 原理的基石，所以这节将重点介绍一下 React Fiber 。

通过本章节，你会学到 React fiber 原理，以及 React 调和的两大阶段，解决面试中遇到的 fiber 问题。

参考问题：

什么是fiber ? Fiber 架构解决了什么问题？
Fiber root 和 root fiber 有什么区别？
不同fiber 之间如何建立起关联的？
React 调和流程？
两大阶段 commit 和 render 都做了哪些事情？
什么是双缓冲树？有什么作用？
Fiber 深度遍历流程？
Fiber的调和能中断吗？如何中断？

什么是fiber

Fiber 的英文的是’纤维‘，fiber 诞生在 Reactv16 版本，整个 React 团队花费两年时间重构 fiber 架构，目的就是解决大型 React 应用卡顿；fiber 在 React 中是最小粒度的执行单元，无论 React 还是 Vue ，在遍历更新每一个节点的时候都不是用的真实 DOM ，都是采用虚拟 DOM ，所以可以理解成 fiber 就是 React 的虚拟 DOM 。

为什么要用fiber

在 Reactv15 以及之前的版本，React 对于虚拟 DOM 是采用递归方式遍历更新的，比如一次更新，就会从应用根部递归更新，递归一旦开始，中途无法中断，随着项目越来越复杂，层级越来越深，导致更新的时间越来越长，给前端交互上的体验就是卡顿。

Reactv16 为了解决卡顿问题引入了 fiber ，为什么它能解决卡顿，更新 fiber 的过程叫做 Reconciler（调和器），每一个 fiber 都可以作为一个执行单元来处理，所以每一个 fiber 可以根据自身的过期时间expirationTime（ v17 版本叫做优先级 lane ）来判断是否还有空间时间执行更新，如果没有时间更新，就要把主动权交给浏览器去渲染，做一些动画，重排（ reflow ），重绘 repaints 之类的事情，这样就能给用户感觉不是很卡。然后等浏览器空余时间，在通过 scheduler （调度器），再次恢复执行单元上来，这样就能本质上中断了渲染，提高了用户体验。

# 二全面认识Fiber

# 1 element,fiber,dom三种什么关系？

首先必须需要弄明白 React.element ，fiber 和真实 DOM 三者是什么关系。

element 是 React 视图层在代码层级上的表象，也就是开发者写的 jsx 语法，写的元素结构，都会被创建成 element 对象的形式。上面保存了 props ， children 等信息。
DOM 是元素在浏览器上给用户直观的表象。
fiber 可以说是是 element 和真实 DOM 之间的交流枢纽站，一方面每一个类型 element 都会有一个与之对应的 fiber 类型，element 变化引起更新流程都是通过 fiber 层面做一次调和改变，然后对于元素，形成新的 DOM 做视图渲染。

结构如下图所示：

首先先来看一下 element 与 fiber 之间的对应关系。

export const FunctionComponent = 0;       // 对应函数组件
export const ClassComponent = 1;          // 对应的类组件
export const IndeterminateComponent = 2;  // 初始化的时候不知道是函数组件还是类组件
export const HostRoot = 3;                // Root Fiber 可以理解为跟元素 ， 通过reactDom.render()产生的根元素
export const HostPortal = 4;              // 对应  ReactDOM.createPortal 产生的 Portal
export const HostComponent = 5;           // dom 元素 比如 <div>
export const HostText = 6;                // 文本节点
export const Fragment = 7;                // 对应 <React.Fragment>
export const Mode = 8;                    // 对应 <React.StrictMode>
export const ContextConsumer = 9;         // 对应 <Context.Consumer>
export const ContextProvider = 10;        // 对应 <Context.Provider>
export const ForwardRef = 11;             // 对应 React.ForwardRef
export const Profiler = 12;               // 对应 <Profiler/ >
export const SuspenseComponent = 13;      // 对应 <Suspense>
export const MemoComponent = 14;          // 对应 React.memo 返回的组件

@前端进阶之旅: 代码已经复制到剪贴板

# 2 fiber保存了那些信息

刚才说到 fiber 作为 element 和真实 DOM 元素的沟通枢纽，那么一个 fiber 上到底保存了那些信息呢？

react-reconciler/src/ReactFiber.js

function FiberNode(){

  this.tag = tag;                  // fiber 标签 证明是什么类型fiber。
  this.key = key;                  // key调和子节点时候用到。
  this.type = null;                // dom元素是对应的元素类型，比如div，组件指向组件对应的类或者函数。
  this.stateNode = null;           // 指向对应的真实dom元素，类组件指向组件实例，可以被ref获取。

  this.return = null;              // 指向父级fiber
  this.child = null;               // 指向子级fiber
  this.sibling = null;             // 指向兄弟fiber
  this.index = 0;                  // 索引

  this.ref = null;                 // ref指向，ref函数，或者ref对象。

  this.pendingProps = pendingProps;// 在一次更新中，代表element创建
  this.memoizedProps = null;       // 记录上一次更新完毕后的props
  this.updateQueue = null;         // 类组件存放setState更新队列，函数组件存放
  this.memoizedState = null;       // 类组件保存state信息，函数组件保存hooks信息，dom元素为null
  this.dependencies = null;        // context或是时间的依赖项

  this.mode = mode;                //描述fiber树的模式，比如 ConcurrentMode 模式

  this.effectTag = NoEffect;       // effect标签，用于收集effectList
  this.nextEffect = null;          // 指向下一个effect

  this.firstEffect = null;         // 第一个effect
  this.lastEffect = null;          // 最后一个effect

  this.expirationTime = NoWork;    // 通过不同过期时间，判断任务是否过期， 在v17版本用lane表示。

  this.alternate = null;           //双缓存树，指向缓存的fiber。更新阶段，两颗树互相交替。
}

@前端进阶之旅: 代码已经复制到剪贴板

如上，我把 fiber 中每一个变量代表什么，都写出来了，大家可以参考一下。

# 3 每一个fiber如何建立起关联的

看过之前章节的朋友都知道对于每一个 element 都会对应一个 fiber ，每一个 fiber 是通过 return ， child ，sibling 三个属性建立起联系的。

return：指向父级 Fiber 节点。
child：指向子 Fiber 节点。
sibling：指向兄弟 fiber 节点。

比如项目中元素结构是这样的：

export default class Index extends React.Component{
   state={ number:666 }
   handleClick=()=>{
     this.setState({
         number:this.state.number + 1
     })
   }
   render(){
     return <div>
       hello，world
       <p > 《React进阶实践指南》 { this.state.number } 👍  </p>
       <button onClick={ this.handleClick } >点赞</button>
     </div>
   }
}

@前端进阶之旅: 代码已经复制到剪贴板

fiber对应的关系如下

# 三 Fiber更新机制

# 1 初始化

既然上述明白了 fiber 里面有什么，以及 fiber 之间是如何建立起关联的，那么接下来就要从初始化和一次更新入手，看一下 fiber 是如何工作的。

第一步：创建fiberRoot和rootFiber

fiberRoot：首次构建应用，创建一个 fiberRoot ，作为整个 React 应用的根基。
rootFiber：如下通过 ReactDOM.render 渲染出来的，如上 Index 可以作为一个 rootFiber。一个 React 应用可以有多 ReactDOM.render 创建的 rootFiber ，但是只能有一个 fiberRoot（应用根节点）。

ReactDOM.render(<Index/>, document.getElementById('app'));

@前端进阶之旅: 代码已经复制到剪贴板

第一次挂载的过程中，会将 fiberRoot 和 rootFiber 建立起关联。

react-reconciler/src/ReactFiberRoot.js

function createFiberRoot(containerInfo,tag){
    /* 创建一个root */
    const root = new FiberRootNode(containerInfo,tag)
    const rootFiber = createHostRootFiber(tag);
    root.current = rootFiber
    return root
}

@前端进阶之旅: 代码已经复制到剪贴板

效果：

第二步：workInProgress和current

经过第一步的处理，开始到正式渲染阶段，会进入 beginwork 流程，在讲渲染流程之前，要先弄明白两个概念：

workInProgress是：正在内存中构建的 Fiber 树称为 workInProgress Fiber 树。在一次更新中，所有的更新都是发生在 workInProgress 树上。在一次更新之后，workInProgress 树上的状态是最新的状态，那么它将变成 current 树用于渲染视图。
current：正在视图层渲染的树叫做 current 树。

currentFiber.alternate = workInProgressFiber
workInProgressFiber.alternate = currentFiber

@前端进阶之旅: 代码已经复制到剪贴板

效果：

第三步：深度调和子节点，渲染视图

接下来会按照上述第二步，在新创建的 alternates 上，完成整个 fiber 树的遍历，包括 fiber 的创建。

效果：

# 2 更新

效果：

# 一 前言

# 二 全面认识Fiber

# 1 element,fiber,dom三种什么关系？

# 2 fiber保存了那些信息

# 3 每一个fiber如何建立起关联的

# 三 Fiber更新机制

# 1 初始化

# 2 更新

# 双缓冲树

# 一前言

# 二全面认识Fiber

原理篇 调和与 fiber|React进阶专题

原理篇 调和与 fiber|React进阶专题

原理篇调和与 fiber|React进阶专题

原理篇调和与 fiber|React进阶专题