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