react源码解析(一)暴露出来的方法

744 阅读2分钟

为了能够加对react熟悉,所以fork了react源码,进行阅读。方便自己学习记录笔记,文中有的地方词不达意,见谅。

github地址eact所提供的的api方法以及hooks方法

从什么文件导出的具体方法

入口为packages/react/index.js

代码如下:它暴露出来了,react所提供的的api方法以及hooks方法等

// react抛出来的方法
export {
  // this.props.children
  Children,
  // 创建ref
  createRef,
  // 组件
  Component,
  // 组件
  PureComponent,
  // 创建上下文
  createContext,
  // 创建ref
  forwardRef,
  lazy,
  memo,
  // hooks里面的useCallback
  useCallback,
  // hooks里面创建上下文
  useContext,
  // hooks创建useEffect
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  // hooks
  useMemo,
  // hooks
  useReducer,
  // hooks
  useRef,
  // hooks
  useState,
  useMutableSource,
  useMutableSource as unstable_useMutableSource,
  createMutableSource,
  createMutableSource as unstable_createMutableSource,
  // 空标签
  /**
   * <>
   *  <p>这就是Fragment</p>
   * </>
   */
  Fragment,
  Profiler,
  unstable_DebugTracingMode,
  StrictMode,
  Suspense,
  // React.createElement()负责生成虚拟domReactDOM.render()将虚拟dom转化为真实dom
  createElement,
  // 克隆组件
  cloneElement,
  isValidElement,
  version,
  __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
  createFactory,
  useTransition,
  useTransition as unstable_useTransition,
  startTransition,
  startTransition as unstable_startTransition,
  useDeferredValue,
  useDeferredValue as unstable_useDeferredValue,
  SuspenseList,
  SuspenseList as unstable_SuspenseList,
  unstable_LegacyHidden,
  unstable_Scope,
  unstable_useOpaqueIdentifier,
  unstable_getCacheForType,
  unstable_Cache,
  unstable_useCacheRefresh,
} from './src/React';

上面未备注的,是自己没有用过的一下api,所以不误导了。

入口为packages/react/src/React.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 ReactVersion from 'shared/ReactVersion';
import {
  REACT_FRAGMENT_TYPE,
  REACT_DEBUG_TRACING_MODE_TYPE,
  REACT_PROFILER_TYPE,
  REACT_STRICT_MODE_TYPE,
  REACT_SUSPENSE_TYPE,
  REACT_SUSPENSE_LIST_TYPE,
  REACT_LEGACY_HIDDEN_TYPE,
  REACT_SCOPE_TYPE,
  REACT_CACHE_TYPE,
} from 'shared/ReactSymbols';

import {Component, PureComponent} from './ReactBaseClasses';
// 导出的是创建ref
import {createRef} from './ReactCreateRef';
// 导出的是this.props.children的五个方法
import {forEach, map, count, toArray, only} from './ReactChildren';
// 导出的是createElement,createFactory,cloneElement方法
import {
  createElement as createElementProd,
  createFactory as createFactoryProd,
  cloneElement as cloneElementProd,
  isValidElement,
} from './ReactElement';
// 导出的是createContext,创建上下文content
import {createContext} from './ReactContext';
import {lazy} from './ReactLazy';
// 导出的也是创建ref的另一种形式
import {forwardRef} from './ReactForwardRef';
import {memo} from './ReactMemo';
// 导出react的hooks相关
import {
  getCacheForType,
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useMutableSource,
  useReducer,
  useRef,
  useState,
  useTransition,
  useDeferredValue,
  useOpaqueIdentifier,
  useCacheRefresh,
} from './ReactHooks';
import {
  createElementWithValidation,
  createFactoryWithValidation,
  cloneElementWithValidation,
} from './ReactElementValidator';
import {createMutableSource} from './ReactMutableSource';
import ReactSharedInternals from './ReactSharedInternals';
import {startTransition} from './ReactStartTransition';

// TODO: Move this branching into the other module instead and just re-export.
const createElement = __DEV__ ? createElementWithValidation : createElementProd;
const cloneElement = __DEV__ ? cloneElementWithValidation : cloneElementProd;
const createFactory = __DEV__ ? createFactoryWithValidation : createFactoryProd;

/**
 * children提供了map,forEach,cout,toArray,only等方法
 */
const Children = {
  map,
  forEach,
  count,
  toArray,
  only,
};

export {
  Children,
  createMutableSource,
  createRef,
  Component,
  PureComponent,
  createContext,
  forwardRef,
  lazy,
  memo,
  useCallback,
  useContext,
  useEffect,
  useImperativeHandle,
  useDebugValue,
  useLayoutEffect,
  useMemo,
  useMutableSource,
  useReducer,
  useRef,
  useState,
  REACT_FRAGMENT_TYPE as Fragment,
  REACT_PROFILER_TYPE as Profiler,
  REACT_STRICT_MODE_TYPE as StrictMode,
  REACT_DEBUG_TRACING_MODE_TYPE as unstable_DebugTracingMode,
  REACT_SUSPENSE_TYPE as Suspense,
  createElement,
  cloneElement,
  isValidElement,
  ReactVersion as version,
  ReactSharedInternals as __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
  // Deprecated behind disableCreateFactory
  createFactory,
  // Concurrent Mode
  useTransition,
  startTransition,
  useDeferredValue,
  REACT_SUSPENSE_LIST_TYPE as SuspenseList,
  REACT_LEGACY_HIDDEN_TYPE as unstable_LegacyHidden,
  getCacheForType as unstable_getCacheForType,
  useCacheRefresh as unstable_useCacheRefresh,
  REACT_CACHE_TYPE as unstable_Cache,
  // enableScopeAPI
  REACT_SCOPE_TYPE as unstable_Scope,
  useOpaqueIdentifier as unstable_useOpaqueIdentifier,
};

接下来,我们一个一个分析吧