为了能够加对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,
};
接下来,我们一个一个分析吧