React源码解析系列(四) —— React剩余的api

现在让我们对React剩下的一些api进行讲解，下面的这些api其实就是每种类型对格式定义，让后续更新流程中能根据这些格式进行渲染。

const React = {
  Children: {
    map,
    forEach,
    count,
    toArray,
    only,
  },

  createRef,
  Component,
  PureComponent,

  createContext,
  forwardRef,
  lazy,
  memo,

  Fragment: REACT_FRAGMENT_TYPE,
  StrictMode: REACT_STRICT_MODE_TYPE,
  Suspense: REACT_SUSPENSE_TYPE,

  createElement: __DEV__ ? createElementWithValidation : createElement,
  cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement,
  createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
  isValidElement: isValidElement,

  version: ReactVersion,

  unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,
  unstable_Profiler: REACT_PROFILER_TYPE,

  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals,
};

createRef

这个方法只是定义了ref的格式，并创建返回。这个会在后续更新中对其进行赋值

export function createRef(): RefObject {
  const refObject = {
    current: null,
  };
  return refObject;
}

 createContext

这个方法返回一个包含Provider和Consumer的object，其中_currentValue和_currentValue2用于保存context的value

export function createContext<T>(
  defaultValue: T,
  calculateChangedBits: ?(a: T, b: T) => number,
): ReactContext<T> {
  if (calculateChangedBits === undefined) {
    calculateChangedBits = null;
  } else {
  }

  const context: ReactContext<T> = {
    $$typeof: REACT_CONTEXT_TYPE,
    _calculateChangedBits: calculateChangedBits,
    // As a workaround to support multiple concurrent renderers, we categorize
    // some renderers as primary and others as secondary. We only expect
    // there to be two concurrent renderers at most: React Native (primary) and
    // Fabric (secondary); React DOM (primary) and React ART (secondary).
    // Secondary renderers store their context values on separate fields.
    _currentValue: defaultValue,
    _currentValue2: defaultValue,
    // Used to track how many concurrent renderers this context currently
    // supports within in a single renderer. Such as parallel server rendering.
    _threadCount: 0,
    // These are circular
    Provider: (null: any),
    Consumer: (null: any),
  };

  context.Provider = {
    $$typeof: REACT_PROVIDER_TYPE,
    _context: context,
  };

  let hasWarnedAboutUsingNestedContextConsumers = false;
  let hasWarnedAboutUsingConsumerProvider = false;

  context.Consumer = context;

  return context;
}

forwardRef

这个方法为了让function组件能使用ref，其中render这个参数就是function组件

export default function forwardRef<Props, ElementType: React$ElementType>(
  render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
) {
  return {
    $$typeof: REACT_FORWARD_REF_TYPE,
    render,
  };
}

lazy

这个方法用于异步加载组件，ctor参数对应异步加载的组件

export function lazy<T, R>(ctor: () => Thenable<T, R>): LazyComponent<T> {
  let lazyType = {
    $$typeof: REACT_LAZY_TYPE,
    _ctor: ctor,
    // React uses these fields to store the result.
    _status: -1,
    _result: null,
  };

  return lazyType;
}

memo

这个方法让function组件实现PureComponent的功能，type对应function组件

export default function memo<Props>(
  type: React$ElementType,
  compare?: (oldProps: Props, newProps: Props) => boolean,
) {
  return {
    $$typeof: REACT_MEMO_TYPE,
    type,
    compare: compare === undefined ? null : compare,
  };
}

Fragment&StrictMode&Suspense&unstable_ConcurrentMode&unstable_Profiler

这几个都是一个Symbol标记位，例如Fragment为

export const REACT_FRAGMENT_TYPE = hasSymbol
  ? Symbol.for('react.fragment')
  : 0xeacb;

version

当前react版本号

__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED

这个是react内部使用的，我们不会使用到这个。它是在更新阶段记录正在更新的组件，格式为

const ReactSharedInternals = {
  ReactCurrentOwner,
  // Used by renderers to avoid bundling object-assign twice in UMD bundles:
  assign,
};

const ReactCurrentOwner = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  // 当前正在更新的组件
  current: (null: null | Fiber),
  // readContext和hooks相关api
  currentDispatcher: (null: null | Dispatcher),
}