fiber作为react16之后的重要更新,它可以分为几个层面来讲解
- 作为架构
- 作为虚拟dom结构
作为虚拟dom结构
我们以页面结构如下做对应讲解
fiber是一个链表结构。在页面渲染时,react会对页面上的每个元素生成对应的fiber节点
这里是页面中p标签对应的fibernode
elementType 指的是当前元素类型;
pengdingProps则是当前dom元素的属性,并包含了子元素;
return指向的是当前节点的父fiber节点;这里p标签的父节点为header,所以return指向的是header的fiberNode
child为当前节点的第一个子fiber节点,这里指向的是“Edit”,如果存在多个子元素,比如header标签下存在img,p,a三个子元素,此时header的fiber节点的child为img,p和a标签的fiber节点则存放在img节点的sibling属性下
状态节点(stateNode),存放当前节点的dom实例,或者组件实例
sibling用于存放当前节点的下一个兄弟节点,这里指向的是a标签