ReactLazyComponent

Package:
packages/shared/ReactLazyComponent.js 

/** * Copyright (c) Facebook, Inc. and its affiliates. * * This source code is licensed under the MIT license found in the * LICENSE file in the root directory of this source tree. * * @flow */

export type Thenable<T, R> = {
  then(resolve: (T) = > mixed, reject: (mixed) = > mixed): R,
};

export type LazyComponent<T> = {
  ? typeof: Symbol | number,
  _ctor: (a)= > Thenable<{default: T}, mixed>,
  _status: 0 | 1 | 2._result: any,
};

type ResolvedLazyComponent<T> = {
  ? typeof: Symbol | number,
  _ctor: (a)= > Thenable<{default: T}, mixed>,
  _status: 1._result: any,
};

export const Pending = 0;
export const Resolved = 1;
export const Rejected = 2;

export function refineResolvedLazyComponent<T> (
  lazyComponent: LazyComponent<T>,
) :ResolvedLazyComponent<T> | null {
  return lazyComponent._status === Resolved ? lazyComponent._result : null;
}
Copy the code

ReactFiberLazyComponent

Package: packages/react – the reconciler/SRC/ReactFiberLazyComponent. Js 

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import type {LazyComponent, Thenable} from 'shared/ReactLazyComponent';

import {Resolved, Rejected, Pending} from 'shared/ReactLazyComponent';
import warning from 'shared/warning';

export function resolveDefaultProps(Component: any, baseProps: Object): Object {
  if (Component && Component.defaultProps) {
    // Resolve default props. Taken from ReactElement
    const props = Object.assign({}, baseProps);
    const defaultProps = Component.defaultProps;
    for (let propName in defaultProps) {
      if(props[propName] === undefined) { props[propName] = defaultProps[propName]; }}return props;
  }
  return baseProps;
}

export function readLazyComponentType<T>(lazyComponent: LazyComponent<T>): T {
  const status = lazyComponent._status;
  const result = lazyComponent._result;
  switch (status) {
    case Resolved: {
      const Component: T = result;
      return Component;
    }
    case Rejected: {
      const error: mixed = result;
      throw error;
    }
    case Pending: {
      const thenable: Thenable<T, mixed> = result;
      throw thenable;
    }
    default: {
      lazyComponent._status = Pending;
      const ctor = lazyComponent._ctor;
      const thenable = ctor();
      thenable.then(
        moduleObject => {
          if (lazyComponent._status === Pending) {
            const defaultExport = moduleObject.default;
            if (__DEV__) {
              if (defaultExport === undefined) {
                warning(
                  false.'lazy: Expected the result of a dynamic import() call. ' +
                    'Instead received: %s\n\nYour code should look like: \n ' +
                    "const MyComponent = lazy(() => import('./MyComponent'))",
                  moduleObject,
                );
              }
            }
            lazyComponent._status = Resolved;
            lazyComponent._result = defaultExport;
          }
        },
        error => {
          if(lazyComponent._status === Pending) { lazyComponent._status = Rejected; lazyComponent._result = error; }}); // Handle synchronous thenables. switch (lazyComponent._status) {case Resolved:
          return lazyComponent._result;
        caseRejected: throw lazyComponent._result; } lazyComponent._result = thenable; throw thenable; }}}Copy the code

React internally resolves the default props of the Component.

  • Combine the props passed into a new Object using object. assign
  • traverseComponent.defaultProps Properties, which do not exist in props, to the new object
  • Return a new object