從零造 React 之 —— Preparation

最近花了一段時間閱讀了一個 React 的最小實現，並結合自己的想法和理解寫了一個系列博客，意圖是用最簡單和清晰的語言講清楚 React 的兩個核心功能，Mounting 和 Updating。這個系列文章的初稿已全部完成，包含全部源碼、demo 和博客，可以點這個 repo 查看（求 star 求關注 _(:з」∠)_）。

這個系列博客總共有六篇，目錄如下：

• Day 1 - Preparation
• Day 2 - Mounting, Part I
• Day 3 - Mounting, Part II
• Day 4 - `setState` & Updating
• Day 5 - Virtual DOM Diff Algorithm
• Day 6 - Updating the Real DOM

本篇我們來做一下閱讀 React 源碼需要做的準備工作。

要閱讀 React 源碼，你並不需要是一個非常有經驗的 React 開發者。在學習了半個月之後，我個人認為，你甚至不需要會 React，理論上依舊也可以達到目的。但是，對 React 有一個良好的使用經驗可以在你閱讀源碼的時候起到一個對照和輔助作用，這一點是十分有幫助的。

在閱讀 React 源碼之前，最重要的一個概念是搞明白這個問題：

在 React 里，Component, Element, Instance 之間有什麼區別和聯繫？

Answer:

• Element 是一個純 JavaScript Object。React 正是使用它來描述整個 DOM 樹的結構。對於每一個組件來說，render 函數返回的也正是一個 element，而不是真正的 DOM 節點。我們使用的 JSX，其實是 React.createElement 函數的語法糖，這個函數返回的是 Element。它的結構是：

{ type: div, props: { className, children, }}

其中，children 的數據結構是 Element 的數組，或者單個 Element。由此，Element 的數據結構滿足了遞歸的需要。

• Component 是我們最常寫的「組件」，有以下幾種類型：
• DOMComponent: `div, span, ul` 等
• Composite Component: 複合組件，又分為 functional component 和 class component
• TextComponent: number or string

由於我們在使用 React 實現組件化的時候，使用的有且只有 Composite Component，所以，我們的每一個組件，其實都是一個 Component。但是當 React 試圖去 render 這些組件的時候，會將 Element 轉化成 Component，進而轉化成真正的 DOM 節點。

• Instance 是 Component 的實例化之後的對象，我們在 Component 中使用的 `this` 就是 instance。這也是 `setState` 和諸多生命周期函數所在的地方。從這一點出發，可以把 Component 理解為 Class，instance是實例化後的結果。

在解決這個問題之後，遇到 React 代碼里的函數名和參數中帶有 "element", "component" 的，一定要自動條件反射到對應的概念，比如說 `instantiateComponent`, `mountComponent`，`createElement`，等等。

除此之外，如果你還沒有信心直接開始閱讀源碼，建議（按次序）閱讀以下三篇官方的 React Advanced Guide。對於理解 React 的架構和一些重要概念很有幫助。