说说 React 中 fiber、DOM、ReactElement、实例对象之间的引用关系

原生组件 fiber

原生组件 fiber，指的就是 type 为 “span”、“div” 的 fiber。

1.fiber.stateNode 指向真实 DOM 节点；2.node["__reactFiber$" + randomKey] 指向对应 fiber，使用随机数是防止和业务代码的属性名冲突，起着类似 symbol 的效果；3.node["__reactProps$" + randomKey] 指向最新 props 对象；利用 DOM 节点的 ['__reactFiber$' + randomKey] 属性，我们能拿到对应的原生组件 fiber。

通过这个 fiber，我们其实拿到了整棵 fiber 树。比如我们可以通过递归访问 fiber.return 找到它所在的类组件或函数组件 fiber。

在控制台选中一个元素，然后输入 $0.__reactFi 然后按下 tab 键补全属性，然后回车，我们就拿到了一个原生组件 fiber。

通过这个小技巧，我们可以去观摩观摩使用了 React 的网站的 fiber 树结构，比如 figma。

React 版本太低的话，是没有这个属性的。

类组件 fiber

1.fiber.stateNode 指向类实例对象 instance；2.instance.__reactInternalSnapshotBeforeUpdate 指向 snapshot 对象（该对象通过 getSnapshotBeforeUpdate 生成，并提供给 componentDidUpdate 使用）；根 fiber

rootFiber 是一棵 fiber 树的根节点。

fiberRoot 是 fiber 树的根节点的维护者，它的 current 决定使用两棵 fiber 树的那一棵（使用了双缓存技术）。

1.fiberRoot.current 指向一个 rootFiber 节点；2.rootFiber.stateNode 指向 fiberRoot；3.rootNode["__reactContainer$" + randomKey] 指向 rootFiberReactElement

ReactElement 的 _owner 指向向上最近的类组件或函数组件 fiber。

最后

最近还整理一份JavaScript与ES的笔记，一共25个重要的知识点，对每个知识点都进行了讲解和分析。能帮你快速掌握JavaScript与ES的相关知识，提升工作效率。

有需要的小伙伴，可以点击下方卡片领取，无偿分享