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

开发 前端
本文探究 Fiber、DOM、ReactElement、类组件实例对象之间的引用关系。

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

本文探究 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。

责任编辑:姜华 来源: 前端西瓜哥
相关推荐

2021-05-11 07:51:30

React ref 前端

2022-12-19 08:17:36

ReactReconciler

2022-07-13 15:23:57

Vue fiberreact前端

2021-07-29 07:55:20

React Fiber架构引擎

2021-08-16 09:59:52

ReactSvelte开发

2010-06-17 18:57:11

UML对象关系

2022-04-16 20:10:00

React Hookfiber框架

2016-10-26 20:49:24

ReactJavascript前端

2021-07-30 07:47:36

DOMReactJsx

2021-04-09 18:01:03

前端ReactDOM

2021-06-29 09:47:34

ReactSetState机制

2010-07-12 14:32:29

UML对象关系

2010-09-28 11:11:23

XML DOMHTML DOM

2022-03-22 13:39:10

框架react面试

2010-06-17 19:07:12

UML对象

2022-02-11 13:44:56

fiber架构React

2023-12-01 09:14:58

ReactFiber

2022-11-10 16:55:41

ReactFiber

2021-06-11 06:54:34

原型构造函数

2023-03-21 08:31:13

ReconcilerFiber架构
点赞
收藏

51CTO技术栈公众号