current position:Home>React reconcileChildren

React reconcileChildren

2021-08-23 04:23:00 snowofcat

reconcileChildren

params

  1. current
  2. workInProgress
  3. nextChildren

    • class Components : instance.render()
    • Function component : return Value
  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 Components : instance.render()
    • Function component : return Value
  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
      )
    );
  }

  //  Array time 
  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 object
  2. mode
  3. lanes

function

  1. perform createFiberFromTypeAndProps, establish Fiber

    • establish createFiber: fiber.elementType = type;

Code

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;
}

copyright notice
author[snowofcat],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210823042259134l.html

Random recommended