1 原始碼結構

我們分析的React原始碼version為16.0.0-alpha.3，原始碼目錄如下圖所示。

含義如下

• addons：外掛，一些比較有用的工具，如transition動畫
• isomorphic: 同構，服務端在頁面初次載入時，將所有方法渲染好，一次性交給客戶端。這樣可以減少Ajax
• shared: 共用方法，一些utils
• test: 測試方法
• renderers: React程式碼核心，大部分功能實現程式碼都在其中
  
  • dom:
  • stack/client: 各種ReactComponent
  • stack/server: 服務端渲染方法
  • shared: CSSProperty, DOMProperty, 合成事件處理，DOM操作方法，如findDOMNode, setInnerHTML等。
  • fiber: 重寫了React核心演算法，架構進行了升級，未來可能會應用。
  • native: ReactNative, 跨平臺實現Android和iOS
  • shared:
  • stack/reconciler: 協調器，包含自定義元件實現ReactCompositeComponent.js， setState機制，生命週期方法流程，DOM diff等
  • shared/event: 事件處理
  • fiber：實驗程式碼，未來可能會應用

2 重要模組

React程式碼還是相當複雜的，我們需要深入理解重要模組的原始碼機制。後面會有幾篇文章針對每個模組進行分析

• 元素和元件的建立：ReactElement元素是一個數據類，包含props refs key等變數。ReactComponent是一個控制類，包含元件狀態，操作方法等，是React對內的一個很重要的類。它有不同的子類實現，如DOM原生元件ReactDOMComponent，React自定義元件ReactCompositeComponent，文字元件ReactDOMTextComponent。

  React利用createClass()建立元件類物件，createElement()建立元件例項物件。JSX經過babel轉譯後，實際是呼叫createElement()建立例項物件。這部分程式碼分析參見 React原始碼分析2 — 元件和物件的建立（createClass，createElement）

• React元件插入DOM流程：建立了ReactElement和ReactComponent後，還需要將virtual DOM插入真實DOM中，這樣瀏覽器才能渲染。React會利用virtual DOM生成HTML，然後將HTML插入父元件中。而root元件正好是我們在ReactDOM.render()方法中傳入的DOM原生物件。這部分程式碼分析參見

  React原始碼分析3 — React元件插入DOM流程

• React生命週期：React吸引人的一個地方在於，有比較清晰的生命週期呼叫方法。利用模板模式使得程式碼結構清晰而又不失靈活性。前端一直以來有個讓人詬病的地方在於，大家程式碼風格各異，沒有像Android那樣比較清晰的流程方法，使得維護起來比較麻煩。React的出現大大解決了這個難題。這部分程式碼分析參見 React原始碼分析4 — React生命週期詳解

• setState實現機制：作為一種前端流行框架，雖然React專注於MVVM中的View，但它也實現了一套View和資料繫結的方法。這個正是setState。同時，利用佇列和transaction來管理setState，避免了一些重複無謂的介面更新。這部分程式碼分析參見 React原始碼分析5 — setState機制

總之，作為當下前端最流行的框架，React原始碼還是值得我們細細分析的。從原始碼中我們也能學到很多優秀的設計模式，讓我們的程式碼更加清晰好維護。文章中如有不正確的地方，歡迎指正！