说说 React 中 fiber、DOM、ReactElement、实例对象之间的引用关系
liuian 2025-03-07 20:53 7 浏览
大家好，我是前端西瓜哥。
本文探究 fiber、DOM、ReactElement、类组件实例对象之间的引用关系。
React 版本为 18.2.0
原生组件 fiber
原生组件 fiber，指的就是 type 为 "span"、"div" 的 fiber。
- fiber.stateNode 指向真实 DOM 节点；
- node["__reactFiber$" + randomKey] 指向对应 fiber，使用随机数是防止和业务代码的属性名冲突，起着类似 symbol 的效果；
- node["__reactProps$" + randomKey] 指向最新 props 对象；
类组件 fiber
- fiber.stateNode 指向类实例对象 instance；
- instance.__reactInternalSnapshotBeforeUpdate 指向 snapshot 对象（该对象通过 getSnapshotBeforeUpdate 生成，并提供给 componentDidUpdate 使用）；
利用 DOM 节点的 ['__reactFiber