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 Language Support 插件

• 配置 workspace/.vscode/settings.json

  {
    "flow.useNPMPackagedFlow": true,
    "javascript.validate.enable": false
  }
  複製代碼

關於 Flow 更多請看 Flow官網。

React

首先，從 react 入口，打開 react 源碼庫 index.js:

'use strict';
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 有：

1. Children

Children: { 
  ...
},
複製代碼

提供處理 props.children 的方法，因爲 props.children 是一個類數組的類型，能夠用 React.Children 來處理

2. Component, Ref 相關

Component,
PureComponent,
createRef,
forwardRef,
複製代碼

• Component: React 組件類
• PureComponent: React 純組件，和 React.Component 相似，都是定義一個組件類。不一樣是 React.Component 沒有實現 shouldComponentUpdate()，而 React.PureComponent 經過 props 和 state 的淺比較實現了。
• createRef: 建立 ref 函數, React.createRef()
• forwardRef: 用來解決 函數組件 以及 HOC 組件傳遞 ref 的問題

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

createContext,
lazy,
memo,

error,
warn,
複製代碼

• createContext: context 建立方法

• lazy: 實現異步加載的功能模塊

• memo: 也是一個高階組件，相似於React.PureComponent，不一樣於React.memo 是 function 組件，React.PureComponent 是 class 組件。

4. React Hooks 相關

useState, 
useEffect, 
useContext,
useCallback,
useImperativeHandle,
useDebugValue,
useLayoutEffect,
useMemo,
useReducer,
useRef,
複製代碼

Hooks 是 React v16.7.0-alpha 開始加入的新特性,可讓你在class之外使用state和其餘React特性

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

• useState: 狀態鉤子，能夠在一個 函數式組件 中調用它，爲這個組件增長一些內部的狀態
• useEffect: 反作用鉤子，爲函數式組件帶來執行 反作用 的能力
• useContext: 能夠訂閱 React context 而不用引入嵌套
• useCallback: 回調鉤子，當輸入對象改變時調用
• useImperativeHandle: 自定義使用 ref 時，公開給父組件的實例值，應和 forwardRef 一塊兒使用
• useDebugValue: 用於在 React 開發者工具中顯示自定義 hook 的標籤
• useLayoutEffect: api 與 useEffect 相同，使用它從 DOM 讀取佈局並同步從新渲染
• useMemo: 當輸入對象改變時，返回一個 memoized 值
• useReducer: useState的替代方案，容許你使用一個reducer來管理一個複雜組件的局部狀態
• useRef: 返回 ref 對象，能夠經過 .current 訪問 ref 實例的屬性方法

5. Fragment, Profiler, StrictMode, Suspense

Fragment: REACT_FRAGMENT_TYPE,
Profiler: REACT_PROFILER_TYPE,
StrictMode: REACT_STRICT_MODE_TYPE,
Suspense: REACT_SUSPENSE_TYPE,
複製代碼

用 Symbol 來表示 React 的 Fragment、StrictMode、Suspense 組件

• Fragment: 能夠聚合一個子元素列表，而且不在DOM中增長額外節點
• StrictMode: 能夠在開發階段開啓嚴格模式，發現應用存在的潛在問題，提高應用的健壯性
• Suspense: 在 React.lazy 時，import 失敗或者異常時，就須要使用 Suspense 給出錯誤提示

6. ReactElement 相關

createElement: __DEV__ ? createElementWithValidation : createElement,  
cloneElement: __DEV__ ? cloneElementWithValidation : cloneElement, 
createFactory: __DEV__ ? createFactoryWithValidation : createFactory,
isValidElement: isValidElement, 
複製代碼

• createElement: 建立 ReactElement
• cloneElement: 克隆 ReactElement
• createFactory: 建立一個專門用來建立某一類 ReactElement 的工廠
• isValidElement: 驗證是不是一個 ReactElement

7. 其它

version: ReactVersion, 
unstable_ConcurrentMode: REACT_CONCURRENT_MODE_TYPE,
__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: ReactSharedInternals, 
複製代碼

• version: React 功能版本號
• __SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: 顧名思義： React 內部元素，不要使用

這些就是 React 最主要的 API，下面 逐個擊破，從應用到源碼，一一吃透 React 。

附 V16 個個版本的更新內容：

React v16.0

• render 支持返回 Array 和 String 、Error Boundaries、createPortal、支持自定義 DOM 屬性、減小文件體積、Fiber；

React v16.1

• react-call-return；

React v16.2

• Fragment；

React v16.3

• createContext、createRef、forwardRef、生命週期函數的更新、Strict Mode；

React v16.4

• Pointer Events、update getDerivedStateFromProps；

React v16.5

• Profiler；

React v16.6

• memo、lazy、Suspense、static contextType、static getDerivedStateFromError()；

React v16.7

• Hooks；

React v16.8

• Concurrent Rendering；

React v16.9（~mid 2019）

• Suspense for Data Fetching；

系列文章

想看更過系列文章，點擊前往 github 博客主頁

走在最後，歡迎關注：前端瓶子君，每日更新