大家好，我是前端西瓜哥。

本文探究 fiber、DOM、ReactElement、類組件實例對象之間的引用關系。

React 版本為 18.2.0

原生組件 fiber

原生組件 fiber，指的就是 type 為 "span"、"div" 的 fiber。

1. fiber.stateNode 指向真實 DOM 節點。
2. node["__reactFiber$" + randomKey] 。
3. node["__reactProps$" + randomKey] 指向最新 props 對象。

類組件 fiber

1. fiber.stateNode 指向類實例對象 instance。
2. instance.__reactInternalSnapshotBeforeUpdate 指向 snapshot 對象（該對象通過 getSnapshotBeforeUpdate 生成，并提供給 componentDidUpdate 使用）。

利用 DOM 節點的 ['__reactFiber$' + randomKey] 屬性，我們能拿到對應的原生組件 fiber。

通過這個 fiber，我們其實拿到了整棵 fiber 樹。比如我們可以通過遞歸訪問 fiber.return 找到它所在的類組件或函數組件 fiber。

在控制臺選中一個元素，然后輸入 $0.__reactFi 然后按下 tab 鍵補全屬性，然后回車，我們就拿到了一個原生組件 fiber。

通過這個小技巧，我們可以去觀摩觀摩使用了 React 的網站的 fiber 樹結構，比如 figma。

React 版本太低的話，是沒有這個屬性的。

根 fiber

rootFiber 是一棵 fiber 樹的根節點。

fiberRoot 是 fiber 樹的根節點的維護者，它的 current 決定使用兩棵 fiber 樹的那一棵（使用了雙緩存技術）。

1. fiberRoot.current 指向一個 rootFiber 節點。
2. rootFiber.stateNode 指向 fiberRoot。
3. rootNode["__reactContainer$" + randomKey] 指向 rootFiber。

ReactElement

ReactElement 的 _owner 指向向上最近的類組件或函數組件 fiber。