updateFunctionalComponent

functionalComponent本身就是一个pure function,所以处理起来相对很简单,获得对应的propscontext之后,直接调用就能获得nextChildren,然后就是常规操作reconcileChildrenmemoizeProps

注意workInProgress.effectTag |= PerformedWork这是functionalComponent中唯一会加入的side effect,也是必定会加的。

function updateFunctionalComponent(current, workInProgress) {
  const fn = workInProgress.type;
  const nextProps = workInProgress.pendingProps;

  if (hasLegacyContextChanged()) {
    // Normally we can bail out on props equality but if context has changed
    // we don't do the bailout and we have to reuse existing props instead.
  } else {
    if (workInProgress.memoizedProps === nextProps) {
      return bailoutOnAlreadyFinishedWork(current, workInProgress);
    }
    // TODO: consider bringing fn.shouldComponentUpdate() back.
    // It used to be here.
  }

  const unmaskedContext = getUnmaskedContext(workInProgress);
  const context = getMaskedContext(workInProgress, unmaskedContext);

  let nextChildren;

  if (__DEV__) {
    ReactCurrentOwner.current = workInProgress;
    ReactDebugCurrentFiber.setCurrentPhase('render');
    nextChildren = fn(nextProps, context);
    ReactDebugCurrentFiber.setCurrentPhase(null);
  } else {
    nextChildren = fn(nextProps, context);
  }
  // React DevTools reads this flag.
  workInProgress.effectTag |= PerformedWork;
  reconcileChildren(current, workInProgress, nextChildren);
  memoizeProps(workInProgress, nextProps);
  return workInProgress.child;
}

results matching ""

    No results matching ""

    Jokcy的二维码

    扫码添加Jokcy,更多更新更优质的前端学习内容不断更新中,期待与你一起成长!

    Jokcy的二维码