Suspense and Fiber: The Intricate Machinery Behind React&#s Rendering Elegance

DDD

发布时间：2024-09-16 18:21:13

400人浏览过

来源于dev.to

转载

suspense and fiber: the intricate machinery behind react

react fiber 是 react 并发渲染的核心，它使框架能够将任务分解为更小的单元，并优先处理更重要的任务，从而实现更流畅、响应更灵敏的用户界面。当与 suspense 配合使用时，它允许 react “暂停”渲染，在等待数据获取或计算等任务完成时显示后备 ui。

fiber 是一个 javascript 对象，代表 react 中的一个工作单元。它在渲染过程中保存有关组件的重要信息：

那篇文章中的所有代码都是伪代码。真实文件链接可以在文末找到

{
  tag,                // the type of fiber (e.g., hostcomponent, functioncomponent)
  statenode,          // the actual dom node or instance for class components
  memoizedprops,      // props used during the last render
  memoizedstate,      // state used during the last render
  return,             // parent fiber
  sibling,            // next sibling fiber
  child,              // first child fiber
  alternate,          // link to the previous fiber (for reconciling updates)
}

纤程树 允许 react 高效地遍历组件树，执行渲染工作，并跟踪更新、状态和 dom 突变。

让我们构建一个由页眉、内容和页脚组件组成的简单应用程序。为了强调 fiber 的工作原理，我们将让 header 执行繁重的计算。

function app() {
  return (
    loading...

); } function header() { // simulating heavy computation for (let i = 0; i < 1e9; i++) {} return

header with heavy computation

; } function content() { return

this is the content area

; } function footer() { return ; }

它是如何开始的？ render 函数负责启动 react 中的初始渲染过程。它需要一个根组件（如 app）并为 react 创建初始的 fiber 树：

function render(element, container) {
  const rootfiber = {
    tag: hostroot,           // root fiber tag
    statenode: container,    // reference to the dom container
    child: null,             // initial child will be added here
  };

  // create a new work-in-progress fiber for our app component
  const appfiber = createfiberfromelement(element);
  rootfiber.child = appfiber;

  // start the rendering process
  schedulework(rootfiber);
}

然后工作安排就开始行动了。 schedulework 负责启动工作循环并处理 fiber 树。它决定何时开始处理工作，通常使用workloop。

function schedulework(rootfiber) {
  nextunitofwork = rootfiber; // set the root fiber as the starting point
  requestidlecallback(workloop); // begin processing fibers when the browser is idle
}

这里，根 fiber 被设置为 nextunitofwork，react 调度 workloop 函数来处理它。 react 使用 requestidlecallback 等待浏览器空闲后再开始工作，这对于非阻塞渲染至关重要。

如前所述，workloop 和performunitofwork 处理纤程的实际处理。这是协调阶段。

腾讯云AI代码助手

基于混元代码大模型的AI辅助编码工具

下载

workloop 通过调用 performunitofwork 来处理每个 fiber，直到所有任务完成或浏览器需要优先处理其他任务。

function workloop() {
  while (nextunitofwork && !shouldyield()) {
    nextunitofwork = performunitofwork(nextunitofwork); // perform work for the next fiber
  }

  if (!nextunitofwork) {
    // commit all completed work to the dom
    commitroot();
  } else {
    // yield control and schedule the next chunk of work
    requestidlecallback(workloop);
  }
}

performunitofwork 处理各个纤维，检查 suspense 边界，启动渲染任务并管理更新。

function performunitofwork(fiber) {
  const next = beginwork(fiber);

  // if there's more work to do, return the next unit
  if (next) {
    return next;
  }

  // otherwise, complete the work and move to the next sibling or parent
  let sibling = fiber.sibling;
  if (sibling) {
    return sibling;
  }

  return fiber.return;
}

function beginwork(fiber) {
  if (fiber.tag === suspensecomponent) {
    if (fiber.suspensestate === suspended) {
      // render fallback ui if data is not ready
      return fiber.fallback;
    } else if (fiber.suspensestate === resolved) {
      // render actual content once data resolves
      return fiber.child;
    }
  }

  // continue rendering for other fibers
}

完成所有工作单元后，commitroot 负责将 fiber 树提交到 dom，包括处理 suspense fallback ui。这是提交阶段。

function commitRoot() {
  let fiber = rootFiber;

  while (fiber) {
    if (fiber.tag === SuspenseComponent && fiber.suspenseState === Suspended) {
      // Commit fallback UI if Suspense is active
      updateDOM(fiber.stateNode);
    } else {
      // Commit normal content
      updateDOM(fiber.memoizedProps);
    }

    // If the fiber has a passive effect (i.e., useEffect), schedule it
    if (fiber.effectTag === Passive) {
    // Function to schedule the useEffect hooks to run after the DOM updates and browser paint
      scheduleEffectHooks(fiber);
    }

    fiber = fiber.next;  // Move to the next fiber in the tree
  }
}