React Fiber Tree

基本概念

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有以下几种节点：

1. Class Components
2. Function Components
3. Intrinsic elements (eg. <div> in jsx)
4. Text element (eg. <div>Hello</div> in jsx — 仅文本部分)

每个节点的某些属性有些不同

For intrinsic and text elements

• type类型
• child sibling 如上述所述，当不存在时为null
• return 父节点
• stateNode 指向真正的dom节点

For function components

• type 指向function component
• stateNode 始终为nul

For class Components

• type 指向class component
• stateNode 指向类实例

如何找到根节点

• 根节点有 _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