React reconcileChildren

reconcileChildren

params

1. current
2. workInProgress

3. nextChildren

   • class 组件: instance.render()
   • 函数组件: return 的值
4. renderLanes

function reconcileChildren(current, workInProgress, nextChildren, renderLanes) {
  if (current === null) {
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes
    );
  } else {
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderLanes
    );
  }
}

reconcileChildFibers

params

1. returnFiber
2. currentFirstChild

3. newChild

   • class 组件: instance.render()
   • 函数组件: return 的值
4. lanes

function reconcileChildFibers(returnFiber, currentFirstChild, newChild, lanes) {
  var isUnkeyedTopLevelFragment =
    typeof newChild === "object" &&
    newChild !== null &&
    newChild.type === REACT_FRAGMENT_TYPE &&
    newChild.key === null;

  if (isUnkeyedTopLevelFragment) {
    newChild = newChild.props.children;
  }

  var isObject = typeof newChild === "object" && newChild !== null;

  if (isObject) {
    switch (newChild.$$typeof) {
      // reconcileSingleElement
      case REACT_ELEMENT_TYPE:
        return placeSingleChild(
          reconcileSingleElement(
            returnFiber,
            currentFirstChild,
            newChild,
            lanes
          )
        );

      case REACT_PORTAL_TYPE:
        return placeSingleChild(
          reconcileSinglePortal(returnFiber, currentFirstChild, newChild, lanes)
        );
    }
  }

  if (typeof newChild === "string" || typeof newChild === "number") {
    return placeSingleChild(
      reconcileSingleTextNode(
        returnFiber,
        currentFirstChild,
        "" + newChild,
        lanes
      )
    );
  }

  // 数组时
  if (isArray$1(newChild)) {
    return reconcileChildrenArray(
      returnFiber,
      currentFirstChild,
      newChild,
      lanes
    );
  }

  if (getIteratorFn(newChild)) {
    return reconcileChildrenIterator(
      returnFiber,
      currentFirstChild,
      newChild,
      lanes
    );
  }

  if (isObject) {
    throwOnInvalidObjectType(returnFiber, newChild);
  }

  {
    if (typeof newChild === "function") {
      warnOnFunctionType(returnFiber);
    }
  }

  if (typeof newChild === "undefined" && !isUnkeyedTopLevelFragment) {
    switch (returnFiber.tag) {
      case ClassComponent: {
        {
          var instance = returnFiber.stateNode;

          if (instance.render._isMockFunction) {
            break;
          }
        }
      }

      case Block:
      case FunctionComponent:
      case ForwardRef:
      case SimpleMemoComponent: {
        {
          {
            throw Error(
              (getComponentName(returnFiber.type) || "Component") +
                "(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null."
            );
          }
        }
      }
    }
  }
  return deleteRemainingChildren(returnFiber, currentFirstChild);
}

createFiberFromElement

params

1. element: ReactElement 对象
2. mode
3. lanes

功能

1. 执行 createFiberFromTypeAndProps，创建 Fiber

   • 创建 createFiber: fiber.elementType = type;

代码

function createFiberFromElement(element, mode, lanes) {
  var owner = null;

  {
    owner = element._owner;
  }

  var type = element.type;
  var key = element.key;
  var pendingProps = element.props;
  var fiber = createFiberFromTypeAndProps(
    type,
    key,
    pendingProps, // element.props
    owner,
    mode,
    lanes
  );

  {
    fiber._debugSource = element._source;
    fiber._debugOwner = element._owner;
  }

  return fiber;
}