React Fiber树的构建和替换过程讲解

目录
  • 前言
  • mount 过程
  • update 过程

前言

React Fiber树的创建和替换过程运用了双缓存技术，即先在内存中创建 fiber 树，待 fiber 树创建完成以后，直接将旧的 fiber 树替换成新的 fiber 树，这样做的好处是省去了直接在页面上渲染时的计算时间，避免计算量大导致的白屏、卡顿，现在你一定还不太理解，下面进行详细讲解！

mount 过程

以一下demo为例进行讲解：

function App() {
  const [num, add] = useState(0);
  return (
    <p onClick={() => add(num + 1)}>{num}</p>
  )
}

ReactDOM.render(<App/>, document.getElementById('root'));
  • 首次渲染时：

执行 ReactDOM.render(<App/>, document.getElementById('root')); 创建一个应用的根节点 fiberRootNode 和 App 组件的根节点 rootFiber，fiberRootNode节点会通过 current 指针指向 rootFiber ；此时构建的 fiber 树叫 current fiber 树，没有子节点；

  • render 阶段：

此阶段会在内存中构建一颗 workInProgress fiber 树，构建时会与 current fiber 树进行 diff ,复用 current fiber 树的 fiber 节点，被复用的 fiber 节点通过 alternate 指针连接；此时的 fiber 树如下图所示：

  • commit 阶段：

由于内容在内存中已经构建完成，下一步就是将内存中的fiber树渲染成真实 DOM ，此后 React 底层将 fiberRootNode 的 current 指针指向了新构建的 fiber 树，此时 workInprogress fiber 树变成了current fiber 树；
此时的 fiber 树结构如下图：

update 过程

此时点击，p 元素，此时状态改变，会触发更新，再次进入 render 阶段，在内存中创建一棵 workInProgress fiber 树，并且和 current fiber 树进行 diff 复用 current fiber 树节点，最后进入 commit 阶段 ，将构建的fiber树渲染到页面上，此后 fiberRootNode 的 current 指针指向 workInProgress fiber 树，更新后的 fiber 树如下所示：

参考：React 技术揭秘

到此这篇关于React Fiber树的构建和替换过程的文章就介绍到这了,更多相关React Fiber树内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React Fiber与调和深入分析

    目录 一 引沿 二 什么是调和 三 什么是Filber 四 实现调和的过程 1. 创建FiberRoot 2. render阶段 五 总结 一 引沿 Fiber 架构是React16中引入的新概念,目的就是解决大型 React 应用卡顿,React在遍历更新每一个节点的时候都不是用的真实DOM,都是采用虚拟DOM,所以可以理解成fiber就是React的虚拟DOM,更新Fiber的过程叫做调和,每一个fiber都可以作为一个执行单元来处理,所以每一个 fiber 可以根据自身的过期时间expir

  • React Fiber原理深入分析

    目录 为什么需要 fiber fiber 之前 fiber 之后 fiber 节点结构 dom 相关属性 tag key 和 type stateNode 链表树相关属性 副作用相关属性 flags Effect List 其他 lane alternate fiber 树的构建与更新 mount 过程 update 过程 总结 react16 版本之后引入了 fiber,整个架构层面的 调度.协调.diff 算法以及渲染等都与 fiber 密切相关.所以为了更好地讲解后面的内容,需要对 fib

  • React超详细讲述Fiber的使用

    目录 Fiber 概念 结构 Fiber树的遍历是这样发生的深度遍历 window.requestIdleCallback() requestAnimationFrame Fiber是如何工作的 结论 Fiber 概念 JavaScript引擎和页面渲染引擎两个线程是互斥的,当其中一个线程执行时,另一个线程只能挂起等待 如果 JavaScript 线程长时间地占用了主线程,那么渲染层面的更新就不得不长时间地等待,界面长时间不更新,会导致页面响应度变差,用户可能会感觉到卡顿 破解JavaScrip

  • React Fiber构建beginWork源码解析

    目录 引言 一. scheduleUpdateOnFiber 二. performSyncWorkOnRoot renderRootSync workLoopSync performUnitOfWork 三. beginWork updateHostRoot reconcileChildren reconcileChildFibers reconcileSingleElement createFiberFromElement mountIndeterminateComponent renderW

  • React Fiber构建completeWork源码解析

    目录 引言 一. completeUnitOfWork 二. completeWork createInstance createElement appendAllChildren 三. Effect useEffect resolveDispatcher mountEffectImpl pushEffect 四. rootFiber-Effect 引言 之前我们介绍了beginWork,react使用的是深度优先遍历算法,整个fiber的构建都遵循此算法. 这也意味着,并不是所有节点begin

  • React Fiber 树思想解决业务实际场景详解

    目录 熟悉 Fiber 树结构 业务场景 熟悉 Fiber 树结构 我们知道,React 从 V16 版本开始采用 Fiber 树架构来实现渲染和更新机制. Fiber 在 React 源码中可以看作是一个任务执行单元,每个 React Element 都会有一个与之对应的 Fiber 节点. Fiber 节点的核心数据结构如下: type Fiber = { type: any, //类型 return: Fiber, //父节点 child: Fiber, // 指向第一个子节点 sibli

  • React Fiber树的构建和替换过程讲解

    目录 前言 mount 过程 update 过程 前言 React Fiber树的创建和替换过程运用了双缓存技术,即先在内存中创建 fiber 树,待 fiber 树创建完成以后,直接将旧的 fiber 树替换成新的 fiber 树,这样做的好处是省去了直接在页面上渲染时的计算时间,避免计算量大导致的白屏.卡顿,现在你一定还不太理解,下面进行详细讲解! mount 过程 以一下demo为例进行讲解: function App() { const [num, add] = useState(0);

  • React工作流程及Error Boundaries实现过程讲解

    目录 什么是Error Boundaries 步骤1:捕获错误 步骤2:构造callback 执行callback 总结 这里简单讲解下React工作流程,后文有用.分为三步: 触发更新 render阶段:计算更新会造成的副作用 commit阶段:在宿主环境执行副作用 副作用有很多,比如: 插入DOM节点 执行useEffect回调 好了,让我们进入主题. 什么是Error Boundaries React提供了两个与错误处理相关的API: getDerivedStateFromError:静态

  • react fiber执行原理示例解析

    react fiber执行原理示例解析

    目录 为什么要使用fiber,要解决什么问题? fiber是什么? 数据结构 执行单元 浏览器工作: Fiber执行原理 workInProgress tree: currentFiber tree: Effects list: render阶段: 遍历节点过程: 收集effect list: commit阶段: 为什么commit必须是同步的操作的? 为什么要使用fiber,要解决什么问题? 在 react16 引入 Fiber 架构之前,react 会采用递归方法对比两颗虚拟DOM树,找出需

  • React Fiber源码深入分析

    React Fiber源码深入分析

    目录 前言 React架构前世今生 React@15及之前 React@16及之后 Fiber Fiber简单理解 Fiber结构 Fiber工作原理 mount update 前言 本次React源码参考版本为17.0.3. React架构前世今生 查阅文档了解到, React@16.x是个分水岭. React@15及之前 在16之前,React架构大致可以分为两层: Reconciler: 主要职责是对比查找更新前后的变化的组件: Renderer: 主要职责是基于变化渲染页面: 但是Rea

  • 详解React Fiber的工作原理

    详解React Fiber的工作原理

    啥是React Fiber? React Fiber,简单来说就是一个从React v16开始引入的新协调引擎,用来实现Virtual DOM的增量渲染. 说人话:就是一种能让React视图更新过程变得更加流畅顺滑的处理手法. 我们都知道:进程大,线程小.而Fiber(纤维)是一种比线程还要细粒度的处理机制.从这个单词也可以猜测:React Fiber会很"细".到底怎么个细法,我们接着往下看. 为什么会有React Fiber? 之前说了,React Fiber是为了让React的视

  • 详解React Fiber架构原理

    详解React Fiber架构原理

    目录 一.概述 二.Fiber架构 2.1 执行单元 2.2 数据结构 2.3 Fiber链表结构 2.4 Fiber节点 2.5 API 2.5.1 requestAnimationFrame 2.5.2 requestIdleCallback 三.Fiber执行流程 3.1 render阶段 3.1.1 遍历流程 3.1.2 收集effect list 3.2 commit阶段 3.2.1 根据effect list 更新视图 3.2.2 视图更新 四.总结 一.概述 在 React 16

随机推荐