文章目录
基本概念
React 16+ 之后,React内部维护了一套渲染树叫做 React Fiber。 Fiber 为每一个JSX element提供了一个节点(fiber node),通过这个节点可以找到这个 JSX element 的 父元素,子元素,兄弟元素以及属性等等。
查看
我们可以随便找一个react的前端项目,选中某一个元素右键 → store as global variable
在控制台中,我们可以看到对应的dom元素已经被保存为temp1
我们使用console.dir(temp1)查看 temp1上的属性和方法,如下,其中,__reactFiber属性即保存了当前fiber node 节点,可以查看其中属性。
树结构
fiber tree 是一棵左孩子右兄弟树,每个节点有:
- sibling 属性,代表其兄弟。
- child 属性,指向左侧第一个child。
- return 属性,指向父节点。
具体如图所示:
详细内容可以参考
https://github.com/nitin42/Making-a-custom-React-renderer/blob/master/part-one.md
不同类型节点
fiber node有以下几种节点:
- Class Components
- Function Components
- Intrinsic elements (eg. <div> in jsx)
- Text element (eg. <div>Hello</div> in jsx — 仅文本部分)
每个节点的某些属性有些不同
For intrinsic and text elements
type
类型child
sibling
如上述所述,当不存在时为nullreturn
父节点stateNode
指向真正的dom节点
For function components
type
指向function componentstateNode
始终为nul
For class Components
type
指向class componentstateNode
指向类实例
如何找到根节点
-
根节点有 _reactRootContainer,其中_internalRoot.current指向根节点
-
ReactDOM.render 返回根节点的fiber node
参考资料:
https://medium.com/@bendtherules/exploring-react-fiber-tree-20cbf62fe808
https://github.com/nitin42/Making-a-custom-React-renderer/blob/master/part-one.md