ReactElement

key prop

  2. // 尝试通过props获取key的时候，将会报错，不能把key作为prop来使用和看待
  3. function defineKeyPropWarningGetter(props, displayName) {
  4.   const warnAboutAccessingKey = function() {
  5.     if (__DEV__) {
  6.       if (!specialPropKeyWarningShown) {
  7.         specialPropKeyWarningShown = true;
  8.         console.error(
  9.           '%s: `key` is not a prop. Trying to access it will result ' +
  10.             'in `undefined` being returned. If you need to access the same ' +
  11.             'value within the child component, you should pass it as a different ' +
  12.             'prop. (https://reactjs.org/link/special-props)',
  13.           displayName,
  14.         );
  15.       }
  16.     }
  17.   };
  18.   // key prop getter覆盖
  19.   warnAboutAccessingKey.isReactWarning = true;
  20.   Object.defineProperty(props, 'key', {
  21.     get: warnAboutAccessingKey,
  22.     configurable: true,
  23.   });
  24. }

同理 ref也是

  1. function defineRefPropWarningGetter(props, displayName) {
  2.   const warnAboutAccessingRef = function() {
  3.     if (__DEV__) {
  4.       if (!specialPropRefWarningShown) {
  5.         specialPropRefWarningShown = true;
  6.         console.error(
  7.           '%s: `ref` is not a prop. Trying to access it will result ' +
  8.             'in `undefined` being returned. If you need to access the same ' +
  9.             'value within the child component, you should pass it as a different ' +
  10.             'prop. (https://reactjs.org/link/special-props)',
  11.           displayName,
  12.         );
  13.       }
  14.     }
  15.   };
  16.   warnAboutAccessingRef.isReactWarning = true;
  17.   Object.defineProperty(props, 'ref', {
  18.     get: warnAboutAccessingRef,
  19.     configurable: true,
  20.   });
  21. }

jsx方法


  1. export function jsx(type, config, maybeKey) {
  2.   let propName;
  4.   // Reserved names are extracted
  5.   const props = {};
  7.   let key = null;
  8.   let ref = null;
  9.   // maybeKey 备选key
  10.   if (maybeKey !== undefined) {
  11.     key = '' + maybeKey;
  12.   }
  14.   // 校验key
  15.   if (hasValidKey(config)) {
  16.     key = '' + config.key;
  17.   }
  19.   // ref校验 不能为string
  20.   if (hasValidRef(config)) {
  21.     ref = config.ref;
  22.   }
  24.     // 开始处理props
  25.   for (propName in config) {
  26.     // config自身属性且不是保留字
  27.     if (
  28.       hasOwnProperty.call(config, propName) &&
  29.       !RESERVED_PROPS.hasOwnProperty(propName)
  30.     ) {
  31.       props[propName] = config[propName];
  32.     }
  33.   }
  35.     // 保留字属性 自身属性 比如标签自己的属性 <a href="">
  36.   if (type && type.defaultProps) {
  37.     const defaultProps = type.defaultProps;
  38.     for (propName in defaultProps) {
  39.       if (props[propName] === undefined) {
  40.         props[propName] = defaultProps[propName];
  41.       }
  42.     }
  43.   }
  45.   return ReactElement(
  46.     type,
  47.     key,
  48.     ref,
  49.     undefined,
  50.     undefined,
  51.     ReactCurrentOwner.current,
  52.     props,
  53.   );
  54. }

createElement

  2. export function createElement(type, config, children) {
  3.   let propName;
  5.   // Reserved names are extracted
  6.   const props = {};
  8.   let key = null;
  9.   let ref = null;
  10.   let self = null;
  11.   let source = null;
  13.   ...
  16.   const childrenLength = arguments.length - 2;
  17.   // createElement(type, config, child)
  18.   if (childrenLength === 1) {
  19.     props.children = children;
  20.   } else if (childrenLength > 1) {
  21.     // createElement(type, config, child, child2, child3...)
  22.     const childArray = Array(childrenLength);
  23.     for (let i = 0; i < childrenLength; i++) {
  24.       childArray[i] = arguments[i + 2];
  25.     }
  26.     if (__DEV__) {
  27.       if (Object.freeze) {
  28.         Object.freeze(childArray);
  29.       }
  30.     }
  31.     props.children = childArray;
  32.   }
  34.   // Resolve default props
  35.   if (type && type.defaultProps) {
  36.     const defaultProps = type.defaultProps;
  37.     for (propName in defaultProps) {
  38.       if (props[propName] === undefined) {
  39.         props[propName] = defaultProps[propName];
  40.       }
  41.     }
  42.   }
  43.   if (__DEV__) {
  44.     if (key || ref) {
  45.       const displayName =
  46.         typeof type === 'function'
  47.           ? type.displayName || type.name || 'Unknown'
  48.           : type;
  49.       if (key) {
  50.         defineKeyPropWarningGetter(props, displayName);
  51.       }
  52.       if (ref) {
  53.         defineRefPropWarningGetter(props, displayName);
  54.       }
  55.     }
  56.   }
  57.   return ReactElement(
  58.     type,
  59.     key,
  60.     ref,
  61.     self,
  62.     source,
  63.     ReactCurrentOwner.current,
  64.     props,
  65.   );
  66. }

ReactContext

ReactLazy

懒加载组件兑现方法

  1. function lazyInitializer<T>(payload: Payload<T>): T {
  2.   // 未初始化过的组件
  3.   if (payload._status === Uninitialized) {
  4.     const ctor = payload._result;
  5.     const thenable = ctor(); // 执行 获取promise
  6.     // Transition to the next state.
  7.     const pending: PendingPayload = (payload: any);
  8.     pending._status = Pending; // pending状态
  9.     pending._result = thenable;
  10.     thenable.then(
  11.       moduleObject => {
  12.         // 预防其他地方已经执行了获取方法了 
  13.         if (payload._status === Pending) {
  14.           const defaultExport = moduleObject.default;
  15.           // Transition to the next state.
  16.           const resolved: ResolvedPayload<T> = (payload: any);
  17.           // 标记懒加载组件已resolved
  18.           resolved._status = Resolved;
  19.           // 拿到了组件导出结果
  20.           resolved._result = defaultExport;
  21.         }
  22.       },
  23.       error => {
  24.         if (payload._status === Pending) {
  25.           // Transition to the next state.
  26.           const rejected: RejectedPayload = (payload: any);
  27.           rejected._status = Rejected;
  28.           rejected._result = error;
  29.         }
  30.       },
  31.     );
  32.   }
  33.   if (payload._status === Resolved) {
  34.     return payload._result;
  35.   } else {
  36.     throw payload._result;
  37.   }
  38. }

构造懒加载组件

  1. export function lazy<T>(
  2.   ctor: () => Thenable<{default: T, ...}>,
  3. ): LazyComponent<T, Payload<T>> {
  4.   const payload: Payload<T> = {
  5.     _status: -1, // 未初始化状态
  6.     _result: ctor, // 获取方法 一般是构造promise的方法
  7.   };
  9.   const lazyType: LazyComponent<T, Payload<T>> = {
  10.     $$typeof: REACT_LAZY_TYPE,
  11.     _payload: payload,
  12.     _init: lazyInitializer,
  13.   };
  16.   return lazyType;
  17. }

ReactForwardRef

forwardRef

  1. /**
  2.  * Copyright (c) Facebook, Inc. and its affiliates.
  3.  *
  4.  * This source code is licensed under the MIT license found in the
  5.  * LICENSE file in the root directory of this source tree.
  6.  */
  8. import {REACT_FORWARD_REF_TYPE, REACT_MEMO_TYPE} from 'shared/ReactSymbols';
  10. export function forwardRef<Props, ElementType: React$ElementType>(
  11.   render: (props: Props, ref: React$Ref<ElementType>) => React$Node,
  12. ) {
  13.   if (__DEV__) {
  14.     if (render != null && render.$$typeof === REACT_MEMO_TYPE) {
  15.       console.error(
  16.         'forwardRef requires a render function but received a `memo` ' +
  17.           'component. Instead of forwardRef(memo(...)), use ' +
  18.           'memo(forwardRef(...)).',
  19.       );
  20.     } else if (typeof render !== 'function') {
  21.       console.error(
  22.         'forwardRef requires a render function but was given %s.',
  23.         render === null ? 'null' : typeof render,
  24.       );
  25.     } else {
  26.       if (render.length !== 0 && render.length !== 2) {
  27.         console.error(
  28.           'forwardRef render functions accept exactly two parameters: props and ref. %s',
  29.           render.length === 1
  30.             ? 'Did you forget to use the ref parameter?'
  31.             : 'Any additional parameter will be undefined.',
  32.         );
  33.       }
  34.     }
  36.     if (render != null) {
  37.       if (render.defaultProps != null || render.propTypes != null) {
  38.         console.error(
  39.           'forwardRef render functions do not support propTypes or defaultProps. ' +
  40.             'Did you accidentally pass a React component?',
  41.         );
  42.       }
  43.     }
  44.   }
  46.   const elementType = {
  47.     $$typeof: REACT_FORWARD_REF_TYPE,
  48.     render,
  49.   };
  50.   if (__DEV__) {
  51.     let ownName;
  52.     Object.defineProperty(elementType, 'displayName', {
  53.       enumerable: false,
  54.       configurable: true,
  55.       get: function() {
  56.         return ownName;
  57.       },
  58.       set: function(name) {
  59.         ownName = name;
  60.         if (render.displayName == null) {
  61.           render.displayName = name;
  62.         }
  63.       },
  64.     });
  65.   }
  66.   return elementType;
  67. }

ReactMemo

memo

纯组件 只根据props，context等引发更新或者通过compare提供更新依据

  1. export function memo<Props>(
  2.   type: React$ElementType,
  3.   compare?: (oldProps: Props, newProps: Props) => boolean,
  4. ) {
  5.   const elementType = {
  6.     $$typeof: REACT_MEMO_TYPE,
  7.     type,
  8.     compare: compare === undefined ? null : compare,
  9.   };
  10.   return elementType;
  11. }

ReactHooks

  1. function resolveDispatcher() {
  2.   // 也就是引用current做事情
  3.   const dispatcher = ReactCurrentDispatcher.current;
  4.   return ((dispatcher: any): Dispatcher);
  5. }
  7. export function useContext<T>(
  8.   Context: ReactContext<T>,
  9.   unstable_observedBits: number | boolean | void,
  10. ): T {
  11.   const dispatcher = resolveDispatcher();
  12.     if ((Context: any)._context !== undefined) {
  13.       const realContext = (Context: any)._context;
  14.     }
  15.   }
  16.   return dispatcher.useContext(Context, unstable_observedBits);
  17. }
  19. export function useState<S>(
  20.   initialState: (() => S) | S,
  21. ): [S, Dispatch<BasicStateAction<S>>] {
  22.   const dispatcher = resolveDispatcher();
  23.   return dispatcher.useState(initialState);
  24. }
  26. export function useReducer<S, I, A>(
  27.   reducer: (S, A) => S,
  28.   initialArg: I,
  29.   init?: I => S,
  30. ): [S, Dispatch<A>] {
  31.   const dispatcher = resolveDispatcher();
  32.   return dispatcher.useReducer(reducer, initialArg, init);
  33. }
  35. export function useRef<T>(initialValue: T): {|current: T|} {
  36.   const dispatcher = resolveDispatcher();
  37.   return dispatcher.useRef(initialValue);
  38. }
  40. export function useEffect(
  41.   create: () => (() => void) | void,
  42.   deps: Array<mixed> | void | null,
  43. ): void {
  44.   const dispatcher = resolveDispatcher();
  45.   return dispatcher.useEffect(create, deps);
  46. }
  48. export function useLayoutEffect(
  49.   create: () => (() => void) | void,
  50.   deps: Array<mixed> | void | null,
  51. ): void {
  52.   const dispatcher = resolveDispatcher();
  53.   return dispatcher.useLayoutEffect(create, deps);
  54. }
  56. export function useCallback<T>(
  57.   callback: T,
  58.   deps: Array<mixed> | void | null,
  59. ): T {
  60.   const dispatcher = resolveDispatcher();
  61.   return dispatcher.useCallback(callback, deps);
  62. }
  64. export function useMemo<T>(
  65.   create: () => T,
  66.   deps: Array<mixed> | void | null,
  67. ): T {
  68.   const dispatcher = resolveDispatcher();
  69.   return dispatcher.useMemo(create, deps);
  70. }
  72. export function useImperativeHandle<T>(
  73.   ref: {|current: T | null|} | ((inst: T | null) => mixed) | null | void,
  74.   create: () => T,
  75.   deps: Array<mixed> | void | null,
  76. ): void {
  77.   const dispatcher = resolveDispatcher();
  78.   return dispatcher.useImperativeHandle(ref, create, deps);
  79. }
  81. export function useDebugValue<T>(
  82.   value: T,
  83.   formatterFn: ?(value: T) => mixed,
  84. ): void {
  85.   if (__DEV__) {
  86.     const dispatcher = resolveDispatcher();
  87.     return dispatcher.useDebugValue(value, formatterFn);
  88.   }
  89. }
  91. export const emptyObject = {};
  93. export function useTransition(): [(() => void) => void, boolean] {
  94.   const dispatcher = resolveDispatcher();
  95.   return dispatcher.useTransition();
  96. }
  98. export function useDeferredValue<T>(value: T): T {
  99.   const dispatcher = resolveDispatcher();
  100.   return dispatcher.useDeferredValue(value);
  101. }
  103. export function useOpaqueIdentifier(): OpaqueIDType | void {
  104.   const dispatcher = resolveDispatcher();
  105.   return dispatcher.useOpaqueIdentifier();
  106. }
  108. export function useMutableSource<Source, Snapshot>(
  109.   source: MutableSource<Source>,
  110.   getSnapshot: MutableSourceGetSnapshotFn<Source, Snapshot>,
  111.   subscribe: MutableSourceSubscribeFn<Source, Snapshot>,
  112. ): Snapshot {
  113.   const dispatcher = resolveDispatcher();
  114.   return dispatcher.useMutableSource(source, getSnapshot, subscribe);
  115. }
  117. export function useCacheRefresh(): <T>(?() => T, ?T) => void {
  118.   const dispatcher = resolveDispatcher();
  119.   // $FlowFixMe This is unstable, thus optional
  120.   return dispatcher.useCacheRefresh();
  121. }