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

目录
  • 熟悉 Fiber 树结构
  • 业务场景

熟悉 Fiber 树结构

我们知道，React 从 V16 版本开始采用 Fiber 树架构来实现渲染和更新机制。

Fiber 在 React 源码中可以看作是一个任务执行单元，每个 React Element 都会有一个与之对应的 Fiber 节点。

Fiber 节点的核心数据结构如下：

type Fiber = {
  type: any, //类型
  return: Fiber, //父节点
  child: Fiber, // 指向第一个子节点
  sibling: Fiber, // 指向下一个弟弟
}

其中，以下三个属性可以构成 Fiber 树：

  • return 表示父 Fiber 节点（顶级元素没有 return 指针）
  • sibling 表示下一个兄弟 Fiber 节点（如果没有下一个兄弟节点，也就没有这个指针）
  • child 表示第一个子 Fiber 节点（如果没有第一个子节点，也就没有这个指针）。

举个例子，假如我们的组件结构如下：

function App() {
  return (
    <div>
      名称：
      <span>明里人</span>
    </div>
  )
}

对应的 Fiber 树结构如下：

通过 Fiber 树结构我们可以很方便的查找一个节点的上级、下级和同级。

接下来我们一起来看看实际的业务场景。

业务场景

有时我们会去实现一些任务类的需求，任务自身存在 status 状态，比如进行中、逾期、完成状态，每个任务都可以通过完成按钮被完成。

假设现在有一个「任务流」作为第一级数据出现，它的子集由一个或多个「任务组」组成，作为第二级数据出现，任务组的子集由一个或多个「任务」组成，作为第三级数据出现。

现有需求如下：

第三级的「任务」在完成时更新自身状态，但要考虑同步上级节点的状态：

  • 如果当前任务所在的任务组下所有任务都已完成，更新当前「任务组」状态为完成；
  • 如果所有任务组及任务都已完成，更新「任务流」状态为完成。

当「任务流」处于完成状态时，UI 的体现可能如下：

思路：

我们要在每个任务完成后，判断同级任务是否都已完成，若都已完成，则将父级（任务组）状态更新为完成。

如果我们将现有的菜单树结构改造为 Fiber 树结构，通过 return 可以很方便的找到父节点，然后通过 child 和 sibling 可以很方便的查找任务组下的每一个任务，决定是否更新任务组状态。

代码实现如下：

// 1. taskFlowData 任务流数据
// 2. currentTaskData 当前完成的任务数据
export const getFinishedStatus = (task) => task.status === 1; // 1 代表完成
export const setFinishedStatus = (task) => task.status = 1;
// 首先，将当前任务的状态更新
setFinishedStatus(currentTaskData);
// 第一步，将现有数据转换为 Fiber 树结构
const createNode = (value, parent) => (
  { value, return: parent, child: null, sibling: null }
);
// 1-1. 创建 root fiber 根节点，即 任务流
const rootNode = createNode(taskFlowData, undefined);
let currentNode = rootNode, currentTaskNode = null;
// 1-2. child 存放的是任务组，为第二级数据创建 Fiber 节点
currentNode.value.child.forEach((taskGroup, taskGroupIndex) => {
  const node = createNode(taskGroup, rootNode);
  // 1-3. 建立关系
  taskGroupIndex === 0 ? (currentNode.child = node) : (currentNode.sibling = node);
  // 1-4. 为第三级任务创建 Fiber 节点
  taskGroup.child.forEach((task, taskIndex) => {
    const childNode = createNode(task, node);
    taskIndex === 0 ? (node.child = childNode) : (currentNode.sibling = childNode);
    currentNode = childNode;
    // 1-5. 记录当前任务对应的 Fiber 节点
    if (task.id === currentTaskData.id) currentTaskNode = currentNode;
  });
  currentNode = node;
});
// 第二步，根据 Fiber 树结构，来查找并更新状态
let parentNode = currentTaskNode.return;
while (parentNode) {
  let isFinished = true;
  // 2-1. 找到第一个任务
  let workInprgress = parentNode.child;
  // 2-2. 从第一个任务开始，依次查看每个任务的状态
  while (workInprgress) {
    // 2-3. 如果查找的当前任务处于未完成状态，无需更新父级状态
    if (!getFinishedStatus(workInprgress.value)) {
      isFinished = false;
      break;
    }
    workInprgress = workInprgress.sibling;
  }
  // 2-4. 更新任务组状态，再向上查找，确定是否更新任务流状态
  if (isFinished) {
    setFinishedStatus(parentNode.value);
    parentNode = parentNode.return;
  } else {
    // 2-5. 任务组状态不需要更新，直接结束
    break;
  }
}

以上就是React Fiber 树思想解决业务实际场景详解的详细内容，更多关于React Fiber树业务场景的资料请关注我们其它相关文章！

赞 (0)

相关推荐

  • React超详细讲述Fiber的使用

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

  • 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构建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树的构建和替换过程讲解

    目录 前言 mount 过程 update 过程 前言 React Fiber树的创建和替换过程运用了双缓存技术,即先在内存中创建 fiber 树,待 fiber 树创建完成以后,直接将旧的 fiber 树替换成新的 fiber 树,这样做的好处是省去了直接在页面上渲染时的计算时间,避免计算量大导致的白屏.卡顿,现在你一定还不太理解,下面进行详细讲解! mount 过程 以一下demo为例进行讲解: function App() { const [num, add] = useState(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 树结构 我们知道,React 从 V16 版本开始采用 Fiber 树架构来实现渲染和更新机制. Fiber 在 React 源码中可以看作是一个任务执行单元,每个 React Element 都会有一个与之对应的 Fiber 节点. Fiber 节点的核心数据结构如下: type Fiber = { type: any, //类型 return: Fiber, //父节点 child: Fiber, // 指向第一个子节点 sibli

  • React Suspense解决竞态条件详解

    目录 前言 Suspense 执行机制 实际应用 好处:请求前置 好处:解决竞态条件 错误处理 源码 前言 在上一篇<React 之 Race Condition>中,我们最后引入了 Suspense 来解决竞态条件问题,本篇我们来详细讲解一下 Suspense. Suspense React 16.6 新增了 <Suspense> 组件,让你可以“等待”目标代码加载,并且可以直接指定一个加载的界面(像是个 spinner),让它在用户等待的时候显示. 目前,Suspense 仅支

  • React中useLayoutEffect钩子使用场景详解

    目录 简介 useEffect钩子的概述 钩子流程 useLayoutEffect钩子的概述 钩子流程 什么时候使用useLayoutEffect钩子? 总结 简介 不久前,React对其功能组件进行了一次重大更新(在2019年3月的16.8版本中),终于为这些组件提供了一种变得有状态的方法. 钩子的加入不仅意味着功能组件将能够提供自己的状态,而且还能通过引入useEffect钩子来管理自己的生命周期事件. 此外,这次更新还引入了一个全新的useLayoutEffect钩子,根据React文档,

  • Vue常见组件间通信方案及典型应用场景详解

    Vue常见组件间通信方案及典型应用场景详解

    目录 什么是组件通信 1.父子组件通信场景 2.兄弟组件通信场景 3.根组件和后代组件通信场景 4.插槽通信场景 5 无直接关系的组件通信场景 6 大型项目中的复杂组件通信场景 - Vuex状态管理 7 其他的一些组件通信方案 总结 什么是组件通信 所谓组件通信,就是组件之间的数据交互,也就是把一个组件A里面的数据传递到另一个组件B,并能够让组件B根据这个数据更新界面. 在 Vue中,可用的通信方案有很多,下面给大家描述几个常用的组件通信方案及其典型的应用场景. 1.父子组件通信场景 父子组件通

  • Java编程思想对象的容纳实例详解

    Java提供了容纳对象(或者对象的句柄)的多种方式,接下来我们具体看看都有哪些方式. 有两方面的问题将数组与其他集合类型区分开来:效率和类型.对于Java来说,为保存和访问一系列对象(实际是对象的句柄)数组,最有效的方法莫过于数组.数组实际代表一个简单的线性序列,它使得元素的访问速度非常快,但我们却要为这种速度付出代价:创建一个数组对象时,它的大小是固定的,而且不可在那个数组对象的"存在时间"内发生改变.可创建特定大小的一个数组,然后假如用光了存储空间,就再创建一个新数组,将所有句柄从

  • react性能优化useMemo与useCallback使用对比详解

    react性能优化useMemo与useCallback使用对比详解

    目录 引言 对比 useMemo useCallback 引言 在介绍一下这两个hooks的作用之前,我们先来回顾一下react中的性能优化.在hooks诞生之前,如果组件包含内部state,我们都是基于class的形式来创建组件.当时我们也知道,react中,性能的优化点在于: 调用setState,就会触发组件的重新渲染,无论前后的state是否不同 父组件更新,子组件也会自动的更新 基于上面的两点,我们通常的解决方案是:使用immutable进行比较,在不相等的时候调用setState:在

  • react组件的创建与更新实现流程详解

    react组件的创建与更新实现流程详解

    目录 React源码执行流程图 legacyRenderSubtreeIntoContainer legacyCreateRootFromDOMContainer createLegacyRoot ReactDOMBlockingRoot createRootImpl createContainer createFiberRoot createHostRootFiber createFiber updateContainer 总结 这一章节就来讲讲ReactDOM.render()方法的内部实现

  • 8个Spring事务失效场景详解

    目录 前言 Spring事务原理 Spring事务失效场景 1. 抛出检查异常 2. 业务方法本身捕获了异常 3. 同一类中的方法调用 4. 方法使用 final 或 static关键字 5. 方法不是public 6. 错误使用传播机制 7. 没有被Spring管理 8. 多线程 总结 前言 作为Java开发工程师,相信大家对Spring种事务的使用并不陌生.但是你可能只是停留在基础的使用层面上,在遇到一些比较特殊的场景,事务可能没有生效,直接在生产上暴露了,这可能就会导致比较严重的生产事故.

  • Java读写锁ReadWriteLock原理与应用场景详解

    Java并发编程提供了读写锁,主要用于读多写少的场景 什么是读写锁? 读写锁并不是JAVA所特有的读写锁(Readers-Writer Lock)顾名思义是一把锁分为两部分:读锁和写锁,其中读锁允许多个线程同时获得,因为读操作本身是线程安全的,而写锁则是互斥锁,不允许多个线程同时获得写锁,并且写操作和读操作也是互斥的. 所谓的读写锁(Readers-Writer Lock),顾名思义就是将一个锁拆分为读锁和写锁两个锁. 其中读锁允许多个线程同时获得,而写锁则是互斥锁,不允许多个线程同时获得写锁,

随机推荐