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

本文探究 fiber、DOM、ReactElement、類組件實(shí)例對(duì)象之間的引用關(guān)系。

React 版本為 18.2.0

原生組件 fiber

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

1. fiber.stateNode 指向真實(shí) DOM 節(jié)點(diǎn)。
2. node["__reactFiber$" + randomKey] 。
3. node["__reactProps$" + randomKey] 指向最新 props 對(duì)象。

類組件 fiber

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

利用 DOM 節(jié)點(diǎn)的 ['__reactFiber$' + randomKey] 屬性，我們能拿到對(duì)應(yīng)的原生組件 fiber。

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

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

通過這個(gè)小技巧，我們可以去觀摩觀摩使用了 React 的網(wǎng)站的 fiber 樹結(jié)構(gòu)，比如 figma。

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

根 fiber

rootFiber 是一棵 fiber 樹的根節(jié)點(diǎn)。

fiberRoot 是 fiber 樹的根節(jié)點(diǎn)的維護(hù)者，它的 current 決定使用兩棵 fiber 樹的那一棵（使用了雙緩存技術(shù)）。

1. fiberRoot.current 指向一個(gè) rootFiber 節(jié)點(diǎn)。
2. rootFiber.stateNode 指向 fiberRoot。
3. rootNode["__reactContainer$" + randomKey] 指向 rootFiber。

ReactElement

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