6. Functional components-construction details and updates (Part 1)

switch (workInProgress.tag) {
    // ignore code
    // Construction of child nodes of functional components
    case FunctionComponent: {
      const Component = workInProgress.type;
      const unresolvedProps = workInProgress.pendingProps;
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      return updateFunctionComponent(
        current,
        workInProgress,
        Component,
        resolvedProps,
        renderLanes,
      );
    }
    // ignore code

if (current !== null) {
  //Double cache mechanism
  const oldProps = current.memoizedProps
  const newProps = workInProgress.pendingProps
  // If not equal, enter comparison
  if (oldProps !== newProps || hasLegacyContextChanged() || (__DEV__ ? workInProgress.type !== current.type : false)) {
    // The status mark needs to update this status. Remember that many subsequent tasks related to this status will be related to it.
    didReceiveUpdate = true
    // If the rendering lane does not contain updates, there is no need to update
  } else if (!includesSomeLane(renderLanes, updateLanes)) {
    didReceiveUpdate = false
    //Context special processing, optimization
    switch (workInProgress.tag) {
    }
    // Does the loop child node need to be updated?
    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes)
  } else {
    if ((current.flags & ForceUpdateForLegacySuspense) !== NoFlags) {
      //To handle the problem that the Suspense component does not update when the Context is updated, force the mark to become true.
      didReceiveUpdate = true
    } else {
      // An update was scheduled on this fiber, but there are no new props
      // nor legacy context. Set this to false. If an update queue or context
      // consumer produces a changed value, it will set this to true. Otherwise,
      // the component will assume the children have not changed and bail out.
      didReceiveUpdate = false
    }
  }
} else {
  // The rest does not need to be updated
  didReceiveUpdate = false
}

function updateFunctionComponent(
  current,
  workInProgress,
  Component,
  nextProps: any,
  renderLanes,
) {
  // ignore code

  let context;
  let nextChildren;
  // This is related to useContext. Let’s talk about it in the hooks branch.
  prepareToReadContext(workInProgress, renderLanes);
  if (__DEV__) {
    //Ignore code
  } else {
    //Here we directly enter the hooks related logic, and finally return the lower-level ReactElement object.
    nextChildren = renderWithHooks(
      current,
      workInProgress,
      Component,
      nextProps,
      context,
      renderLanes,
    );
  }
  //Old rule, if the status of didReceiveUpdate is that it does not need to be updated as mentioned earlier, search down the subsection.
  if (current !== null && !didReceiveUpdate) {
    bailoutHooks(current, workInProgress, renderLanes);
    return bailoutOnAlreadyFinishedWork(current, workInProgress, renderLanes);
  }

  // React DevTools reads this flag. We will skip the performance stuff for now
  workInProgress.flags |= PerformedWork;
  // Generate child fiber nodes downwards
  reconcileChildren(current, workInProgress, nextChildren, renderLanes);
  return workInProgress.child;
}

export function renderWithHooks<Props, SecondArg>(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: (p: Props, arg: SecondArg) => any,
  props: Props,
  secondArg: SecondArg,
  nextRenderLanes: Lanes,
): any {
  // Phase 1: Set the global status
  renderLanes = nextRenderLanes; // Current rendering priority
  currentlyRenderingFiber = workInProgress; //The current fiber node, which is the fiber node corresponding to the function component
  if (__DEV__) {
    //Ignore code
  }
  // Clear the legacy status of the current fiber
  workInProgress.memoizedState = null;
  workInProgress.updateQueue = null;
  workInProgress.lanes = NoLanes;
   if (__DEV__) {
    //Ignore code
   } else {
      // Phase 2: Generate ReactElement child nodes
      // ReactCurrentDispatcher comes from the global variable in react-dom, confirm whether it is initialized or updated
      ReactCurrentDispatcher.current =
        current === null || current.memoizedState === null
          ?HooksDispatcherOnMount
          : HooksDispatcherOnUpdate;
      //Execute function function
      let children = Component(props, secondArg);
   }

  //Reset global variables and return
  // After executing the function, restore the modified global variables without affecting the next call.
  renderLanes = NoLanes;
  currentlyRenderingFiber = (null: any);

  currentHook = null;
  workInProgressHook = null;
  didScheduleRenderPhaseUpdate = false;

  return children;
}