**一、Fiber的含義和作用** （1）每一個`ReactElement`對應一個`Fiber`對象 （2）記錄節點的各種狀態 比如`ClassComponent`中的`state`和`props`的狀態就是記錄在`Fiber`對象上的。 只有當`Fiber`對象更新后，才會更新到`ClassComponent`上的`this.state`和`this.props`上 **`this`上的`state`和`props`是根據`Fiber`對象的`state`、`props`更新的。** 這實際上也方便了`ReactHooks`，因為`hooks`是為`FunctionalComponent`服務的。雖然`FunctionalComponent`沒有`this`，但`Fiber`上有，是可以拿到`state`和`props`的 （3）串聯整個應用形成樹結構 每個`ReactElement`通過**`props.children`**與其他`ReactElement`連結起來  **說明：** ①`ReactElement`只會把子節點（`props.children`）的第一個子節點當做`child`節點，其余的子節點（也就是第一個子節點的兄弟節點）都是從第一個子節點開始，依次**單向連接**至后一個兄弟節點 ② 每個子節點都會指向父節點（紅箭頭），也就是`Fiber`對象的`return`屬性 ~~~ export type Fiber = {| //指向該對象在Fiber節點樹中的`parent`，用來在處理完該節點后返回 //即流程圖上的紅線 return: Fiber | null, } ~~~ **串聯過程：** ① 任一 葉子 節點`A`，如果有兄弟節點，則去單向向后遍歷兄弟節點，最后`return`到父節點 ② 父節點的`child`節點不是剛剛的子節點`A`的話，則從`child`節點遍歷到`A`前的節點，并再次`return`到父節點 ③ 該父節點執行 ①、② **根據圖1舉例：** 比如從左下角的`input`節點開始，它沒有兄弟節點，則`return`到父組件`Input`（因為父節點有且只有一個，所以必定`return`到父節點） `Input`有兄弟節點`List`，`List`又有`child`節點，則從`child`節點往后單向遍歷兄弟節點，最后`return`到`List` `List`又`return`到`div`，`div`的`child`節點已被遍歷，則`return`到`App`節點，`App`，`App`又`return`到所有`Fiber`對象的根對象`RootFiber`對象 這樣，就將整個應用遍歷完了。 ## 摘自 [ React源碼解析之RootFiber](https://segmentfault.com/a/1190000020121326)