关于react.js: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;
}