React 源码漂流（一）之 起航

在前端开发过程中，源码解读是必不可少的一个环节，我们直接进入主题，注意当前 React 版本号 16.8.6。

注意：react 包文件仅仅是 React components 的必要的、功能性的定义，它必须要结合 React render一起使用（web下是 react-dom，原生app环境下是react-native）。即 react 仅仅是定义节点与表现行为的包，具体如何渲染、如何更新这是与平台相关的，都是放在react-dom、react-native 包里的。这是我们只分析 web 环境的，即我们不会只分析 react 包文件，会结合 react 包与 react-dom、react-reconciler 及其他相关包一起分析。

React 16.8.6 使用 FlowTypes 静态类型检查器，我们需要在开发工具中支持 Fow（以 vscode 为例）：

关于 Flow 更多请看 Flow官网。

React

首先，从 react 入口，打开 react 源码库 index.js:

'use strict';const React = require('./src/React');// TODO: 决定顶层文件导出格式// 虽然是旁门左道，但它可以使 React 在 Rollup 和 Jest 上运行module.exports = React.default || React;
const React = require('./src/React');
// TODO: 决定顶层文件导出格式
// 虽然是旁门左道，但它可以使 React 在 Rollup 和 Jest 上运行
module.exports = React.default || React;

进入 ./src/React。

React API

其中 React 完整内容是：

const React = { // React 暴露出来的 API  ...};// Note: some APIs are added with feature flags.// Make sure that stable builds for open source// don't modify the React object to avoid deopts.// Also let's not expose their names in stable builds.if (enableStableConcurrentModeAPIs) {  React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;  React.unstable_ConcurrentMode = undefined;}if (enableJSXTransformAPI) {  if (__DEV__) {    React.jsxDEV = jsxWithValidation;    React.jsx = jsxWithValidationDynamic;    React.jsxs = jsxWithValidationStatic;  } else {    React.jsx = jsx;    // we may want to special case jsxs internally to take advantage of static children.    // for now we can ship identical prod functions    React.jsxs = jsx;  }}export default React;// React 暴露出来的 API
  ...
};

// Note: some APIs are added with feature flags.
// Make sure that stable builds for open source
// don't modify the React object to avoid deopts.
// Also let's not expose their names in stable builds.

if (enableStableConcurrentModeAPIs) {
  React.ConcurrentMode = REACT_CONCURRENT_MODE_TYPE;
  React.unstable_ConcurrentMode = undefined;
}

if (enableJSXTransformAPI) {
  if (__DEV__) {
    React.jsxDEV = jsxWithValidation;
    React.jsx = jsxWithValidationDynamic;
    React.jsxs = jsxWithValidationStatic;
  } else {
    React.jsx = jsx;
    // we may want to special case jsxs internally to take advantage of static children.
    // for now we can ship identical prod functions
    React.jsxs = jsx;
  }
}

export default React;

其中，React 暴露出来的 API 有：

1. Children

Children: {   ...},
},

提供处理 props.children 的方法，由于 props.children 是一个类数组的类型，可以用 React.Children 来处理

2. Component, Ref 相关

Component,PureComponent,createRef,forwardRef,
createRef,
forwardRef,

3. createContext, lazy, memo, error, warn,

createContext,lazy,memo,error,warn,
memo,

error,
warn,

4. React Hooks 相关

useState, useEffect, useContext,useCallback,useImperativeHandle,useDebugValue,useLayoutEffect,useMemo,useReducer,useRef,
useContext,
useCallback,
useImperativeHandle,
useDebugValue,
useLayoutEffect,
useMemo,
useReducer,
useRef,

Hooks 是 React v16.7.0-alpha 开始加入的新特性,可以让你在class以外使用state和其他React特性

其中 useState、useEffect、useContext 是 Hooks 三个最主要的API

5. Fragment, Profiler, StrictMode, Suspense

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

用 Symbol 来表示 React 的 Fragment、StrictMode、Suspense 组件

6. ReactElement 相关

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

7. 其它

version: ReactVersion, unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals, unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals, 

这些就是 React 最主要的 API，下面 逐个击破，从应用到源码，一一吃透 React 。

附 V16 个个版本的更新内容：

React v16.0

React v16.1

React v16.2

React v16.3

React v16.4

React v16.5

React v16.6

React v16.7

React v16.8

React v16.9（~mid 2019）

写在最后：你的喜欢与关注，是小瓶子最大的动力！！！