React源码解析之FunctionComponent（上）

    //FunctionComponent的更新
    case FunctionComponent: {
      //React 组件的类型，FunctionComponent的类型是 function，ClassComponent的类型是 class
      const Component = workInProgress.type;
      //下次渲染待更新的 props
      const unresolvedProps = workInProgress.pendingProps;
      // pendingProps
      const resolvedProps =
        workInProgress.elementType === Component
          ? unresolvedProps
          : resolveDefaultProps(Component, unresolvedProps);
      //更新 FunctionComponent
      //可以看到大部分是workInProgress的属性
      //之所以定义变量再传进去，是为了“冻结”workInProgress的属性，防止在 function 里会改变workInProgress的属性
      return updateFunctionComponent(
        //workInProgress.alternate
        current,
        workInProgress,
        //workInProgress.type
        Component,
        //workInProgress.pendingProps
        resolvedProps,
        renderExpirationTime,
      );
    }

//更新 functionComponent
//current：workInProgress.alternate
//Component：workInProgress.type
//resolvedProps：workInProgress.pendingProps
function updateFunctionComponent(
  current,
  workInProgress,
  Component,
  nextProps: any,
  renderExpirationTime,
) {
  //删掉了 dev 代码
  //后面讲 context 的时候再作说明
  const unmaskedContext = getUnmaskedContext(workInProgress, Component, true);
  const context = getMaskedContext(workInProgress, unmaskedContext);

  let nextChildren;
  //做update 标记可不看
  prepareToReadContext(workInProgress, renderExpirationTime);
  prepareToReadEventComponents(workInProgress);
  //删掉了 dev 代码

  //在渲染的过程中，对里面用到的 hook函数做一些操作
    nextChildren = renderWithHooks(
      current,
      workInProgress,
      Component,
      nextProps,
      context,
      renderExpirationTime,
    );

  //如果不是第一次渲染，并且没有接收到更新的话
  //didReceiveUpdate:更新上的优化
  if (current !== null && !didReceiveUpdate) {
    bailoutHooks(current, workInProgress, renderExpirationTime);
    return bailoutOnAlreadyFinishedWork(
      current,
      workInProgress,
      renderExpirationTime,
    );
  }

  // React DevTools reads this flag.
  //表明当前组件在渲染的过程中有被更新到
  workInProgress.effectTag |= PerformedWork;
  //将 ReactElement 变成 fiber对象，并更新，生成对应 DOM 的实例，并挂载到真正的 DOM 节点上
  reconcileChildren(
    current,
    workInProgress,
    nextChildren,
    renderExpirationTime,
  );
  return workInProgress.child;
}

//跳过hooks更新
export function bailoutHooks(
  current: Fiber,
  workInProgress: Fiber,
  expirationTime: ExpirationTime,
) {
  workInProgress.updateQueue = current.updateQueue;
  workInProgress.effectTag &= ~(PassiveEffect | UpdateEffect);
  //置为NoWork 不更新
  if (current.expirationTime <= expirationTime) {
    current.expirationTime = NoWork;
  }
}

//渲染的过程中，对里面用到的 hook函数做一些操作
export function renderWithHooks(
  current: Fiber | null,
  workInProgress: Fiber,
  Component: any,
  props: any,
  refOrContext: any,
  nextRenderExpirationTime: ExpirationTime,
): any {
  renderExpirationTime = nextRenderExpirationTime;
  //当前正要渲染的 fiber 对象
  currentlyRenderingFiber = workInProgress;
  //第一次的 state 状态
  nextCurrentHook = current !== null ? current.memoizedState : null;
  //删除了 dev 代码

  // The following should have already been reset
  // currentHook = null;
  // workInProgressHook = null;

  // remainingExpirationTime = NoWork;
  // componentUpdateQueue = null;

  // didScheduleRenderPhaseUpdate = false;
  // renderPhaseUpdates = null;
  // numberOfReRenders = 0;
  // sideEffectTag = 0;

  // TODO Warn if no hooks are used at all during mount, then some are used during update.
  // Currently we will identify the update render as a mount because nextCurrentHook === null.
  // This is tricky because it's valid for certain types of components (e.g. React.lazy)

  // Using nextCurrentHook to differentiate between mount/update only works if at least one stateful hook is used.
  // Non-stateful hooks (e.g. context) don't get added to memoizedState,
  // so nextCurrentHook would be null during updates and mounts.

  //删除了 dev 代码

    //第一次渲染调用HooksDispatcherOnMount
    //多次渲染调用HooksDispatcherOnUpdate

    //用来存放 useState、useEffect 等 hook 函数的对象
    ReactCurrentDispatcher.current =
      nextCurrentHook === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;

  //workInProgress.type，这里能当做 function 使用，说明 type 是 function
  let children = Component(props, refOrContext);
  //判断在执行 render的过程中是否有预定的更新

  //当有更新要渲染时
  if (didScheduleRenderPhaseUpdate) {
    do {
      //置为 false 说明该循环只会执行一次
      didScheduleRenderPhaseUpdate = false;
      //重新渲染时fiber 的节点数
      numberOfReRenders += 1;

      // Start over from the beginning of the list
      //记录 state，以便重新执行这个 FunctionComponent 内部的几个 useState 函数
      nextCurrentHook = current !== null ? current.memoizedState : null;
      nextWorkInProgressHook = firstWorkInProgressHook;
      //释放当前 state
      currentHook = null;
      workInProgressHook = null;
      componentUpdateQueue = null;

      if (__DEV__) {
        // Also validate hook order for cascading updates.
        hookTypesUpdateIndexDev = -1;
      }
      //HooksDispatcherOnUpdate
      ReactCurrentDispatcher.current = __DEV__
        ? HooksDispatcherOnUpdateInDEV
        : HooksDispatcherOnUpdate;

      children = Component(props, refOrContext);
    } while (didScheduleRenderPhaseUpdate);

    renderPhaseUpdates = null;
    numberOfReRenders = 0;
  }

  // We can assume the previous dispatcher is always this one, since we set it
  // at the beginning of the render phase and there's no re-entrancy.
  ReactCurrentDispatcher.current = ContextOnlyDispatcher;

  //定义新的 fiber 对象
  const renderedWork: Fiber = (currentlyRenderingFiber: any);
  //为属性赋值
  renderedWork.memoizedState = firstWorkInProgressHook;
  renderedWork.expirationTime = remainingExpirationTime;
  renderedWork.updateQueue = (componentUpdateQueue: any);
  renderedWork.effectTag |= sideEffectTag;

  if (__DEV__) {
    renderedWork._debugHookTypes = hookTypesDev;
  }

  // This check uses currentHook so that it works the same in DEV and prod bundles.
  // hookTypesDev could catch more cases (e.g. context) but only in DEV bundles.
  const didRenderTooFewHooks =
    currentHook !== null && currentHook.next !== null;

  //重置
  renderExpirationTime = NoWork;
  currentlyRenderingFiber = null;

  currentHook = null;
  nextCurrentHook = null;
  firstWorkInProgressHook = null;
  workInProgressHook = null;
  nextWorkInProgressHook = null;

  if (__DEV__) {
    currentHookNameInDev = null;
    hookTypesDev = null;
    hookTypesUpdateIndexDev = -1;
  }

  remainingExpirationTime = NoWork;
  componentUpdateQueue = null;
  sideEffectTag = 0;

  // These were reset above
  // didScheduleRenderPhaseUpdate = false;
  // renderPhaseUpdates = null;
  // numberOfReRenders = 0;

  invariant(
    !didRenderTooFewHooks,
    'Rendered fewer hooks than expected. This may be caused by an accidental ' +
      'early return statement.',
  );

  return children;
}

const HooksDispatcherOnMount: Dispatcher = {
  readContext,

  useCallback: mountCallback,
  useContext: readContext,
  useEffect: mountEffect,
  useImperativeHandle: mountImperativeHandle,
  useLayoutEffect: mountLayoutEffect,
  useMemo: mountMemo,
  useReducer: mountReducer,
  useRef: mountRef,
  useState: mountState,
  useDebugValue: mountDebugValue,
  useEvent: updateEventComponentInstance,
};

const HooksDispatcherOnUpdate: Dispatcher = {
  readContext,

  useCallback: updateCallback,
  useContext: readContext,
  useEffect: updateEffect,
  useImperativeHandle: updateImperativeHandle,
  useLayoutEffect: updateLayoutEffect,
  useMemo: updateMemo,
  useReducer: updateReducer,
  useRef: updateRef,
  useState: updateState,
  useDebugValue: updateDebugValue,
  useEvent: updateEventComponentInstance,
};

// Whether an update was scheduled during the currently executing render pass.
//判断在执行 render的过程中是否有预定的更新
let didScheduleRenderPhaseUpdate: boolean = false;

export function reconcileChildren(
  current: Fiber | null,
  workInProgress: Fiber,
  nextChildren: any,
  renderExpirationTime: ExpirationTime,
) {
  if (current === null) {
    // If this is a fresh new component that hasn't been rendered yet, we
    // won't update its child set by applying minimal side-effects. Instead,
    // we will add them all to the child before it gets rendered. That means
    // we can optimize this reconciliation pass by not tracking side-effects.

    //因为是第一次渲染，所以不存在current.child，所以第二个参数传的 null
    //React第一次渲染的顺序是先父节点，再是子节点

    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderExpirationTime,
    );
  } else {
    // If the current child is the same as the work in progress, it means that
    // we haven't yet started any work on these children. Therefore, we use
    // the clone algorithm to create a copy of all the current children.

    // If we had any progressed work already, that is invalid at this point so
    // let's throw it out.
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderExpirationTime,
    );
  }
}

//true false
export const reconcileChildFibers = ChildReconciler(true);
export const mountChildFibers = ChildReconciler(false);

//是否跟踪副作用
function ChildReconciler(shouldTrackSideEffects) {
  xxx
  xxx
  xxx


  function reconcileChildFibers(): Fiber | null {
    
  }
  
  return reconcileChildFibers;
}

 // This API will tag the children with the side-effect of the reconciliation
  // itself. They will be added to the side-effect list as we pass through the
  // children and the parent.
  function reconcileChildFibers(
    returnFiber: Fiber,
    currentFirstChild: Fiber | null,
    //新计算出来的 children
    newChild: any,
    expirationTime: ExpirationTime,
  ): Fiber | null {
    // This function is not recursive.
    // If the top level item is an array, we treat it as a set of children,
    // not as a fragment. Nested arrays on the other hand will be treated as
    // fragment nodes. Recursion happens at the normal flow.

    // Handle top level unkeyed fragments as if they were arrays.
    // This leads to an ambiguity between <>{[...]}</> and <>...</>.
    // We treat the ambiguous cases above the same.
    const isUnkeyedTopLevelFragment =
      typeof newChild === 'object' &&
      newChild !== null &&
      //在开发中写<div>{ arr.map((a,b)=>xxx) }</div>，这种节点称为 REACT_FRAGMENT_TYPE
      newChild.type === REACT_FRAGMENT_TYPE &&
      newChild.key === null;
    //type 为REACT_FRAGMENT_TYPE是不需要任何更新的，直接渲染子节点即可
    if (isUnkeyedTopLevelFragment) {
      newChild = newChild.props.children;
    }

    // Handle object types
    const isObject = typeof newChild === 'object' && newChild !== null;
    //element 节点
    if (isObject) {
      switch (newChild.$$typeof) {
        // ReactElement节点
        case REACT_ELEMENT_TYPE:
          return placeSingleChild(
            reconcileSingleElement(
              returnFiber,
              currentFirstChild,
              newChild,
              expirationTime,
            ),
          );
        //ReactDOM.createPortal(child, container)
        //https://zh-hans.reactjs.org/docs/react-dom.html#createportal
        case REACT_PORTAL_TYPE:
          return placeSingleChild(
            reconcileSinglePortal(
              returnFiber,
              currentFirstChild,
              newChild,
              expirationTime,
            ),
          );
      }
    }
    //文本节点
    if (typeof newChild === 'string' || typeof newChild === 'number') {
      return placeSingleChild(
        reconcileSingleTextNode(
          returnFiber,
          currentFirstChild,
          '' + newChild,
          expirationTime,
        ),
      );
    }
    //数组节点
    if (isArray(newChild)) {
      return reconcileChildrenArray(
        returnFiber,
        currentFirstChild,
        newChild,
        expirationTime,
      );
    }
    //IteratorFunction
    if (getIteratorFn(newChild)) {
      return reconcileChildrenIterator(
        returnFiber,
        currentFirstChild,
        newChild,
        expirationTime,
      );
    }
    //如果未符合上述的 element 节点的要求，则报错
    if (isObject) {
      throwOnInvalidObjectType(returnFiber, newChild);
    }


    //删除了 dev 代码

    //报出警告，可不看
    if (typeof newChild === 'undefined' && !isUnkeyedTopLevelFragment) {
      // If the new child is undefined, and the return fiber is a composite
      // component, throw an error. If Fiber return types are disabled,
      // we already threw above.

      //即workInProgress，正在更新的节点
      switch (returnFiber.tag) {
        case ClassComponent: {
          //删除了 dev 代码

        }
        // Intentionally fall through to the next case, which handles both
        // functions and classes
        // eslint-disable-next-lined no-fallthrough
        case FunctionComponent: {
          const Component = returnFiber.type;
          invariant(
            false,
            '%s(...): Nothing was returned from render. This usually means a ' +
            'return statement is missing. Or, to render nothing, ' +
            'return null.',
            Component.displayName || Component.name || 'Component',
          );
        }
      }
    }

    // Remaining cases are all treated as empty.

    //如果旧节点存在，但是更新的节点是 null 的话，需要删除旧节点的内容
    return deleteRemainingChildren(returnFiber, currentFirstChild);
  }

<div>{ arr.map((a,b)=>xxx) }</div>

newChild = newChild.props.children;