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

,大家好，我是前端西瓜哥。,本文探究 fiber、DOM、ReactElement、类组件实例对象之间的引用关系。,,原生组件 fiber，指的就是 type 为 "span"、"div" 的 fiber。,,利用 DOM 节点的 ['__reactFiber$' + randomKey] 属性，我们能拿到对应的原生组件 fiber。,通过这个 fiber，我们其实拿到了整棵 fiber 树。比如我们可以通过递归访问 fiber.return 找到它所在的类组件或函数组件 fiber。,在控制台选中一个元素，然后输入 $0.__reactFi 然后按下 tab 键补全属性，然后回车，我们就拿到了一个原生组件 fiber。,,通过这个小技巧，我们可以去观摩观摩使用了 React 的网站的 fiber 树结构，比如 figma。,,rootFiber 是一棵 fiber 树的根节点。,fiberRoot 是 fiber 树的根节点的维护者，它的 current 决定使用两棵 fiber 树的那一棵（使用了双缓存技术）。,,ReactElement 的 _owner 指向向上最近的类组件或函数组件 fiber。