Skip to content
目录

updateFunctionComponent

typescript
function updateFunctionComponent(
  current,
  workInProgress,
  Component,
  nextProps: any,
  renderExpirationTime,
) {
  let nextChildren;
  // 调用 renderWithHooks ,将函数式组件渲染,返回一个JSXElement
  // 然后调用reconcileChildren将其变成Fiber对象
  // renderWithHooks 在后续看hook得实现的详细阅读
  nextChildren = renderWithHooks(
    current,
    workInProgress,
    Component,
    nextProps,
    context,
    renderExpirationTime,
  );

  if (current !== null && !didReceiveUpdate) {
    bailoutHooks(current, workInProgress, renderExpirationTime);
    // 在当前帧没有更新则跳过当前节点的更新
    return bailoutOnAlreadyFinishedWork(
      current,
      workInProgress,
      renderExpirationTime,
    );
  }

  // React DevTools reads this flag.
  workInProgress.effectTag |= PerformedWork;
  // 根据函数组件返回的JSXElement生成Fiber对象
  reconcileChildren(
    current,
    workInProgress,
    nextChildren,
    renderExpirationTime,
  );
  // 将当前节点的child返回到workLoop继续调用
  return workInProgress.child;
}

reconcileChildren下文分析

备案号: 浙ICP备2023000081号