react源码学习(二)fiber详解

123 阅读1分钟

fiber作为react16之后的重要更新,它可以分为几个层面来讲解

  1. 作为架构
  2. 作为虚拟dom结构

作为虚拟dom结构

我们以页面结构如下做对应讲解 image.png fiber是一个链表结构。在页面渲染时,react会对页面上的每个元素生成对应的fiber节点 这里是页面中p标签对应的fibernode image.png

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实例,或者组件实例 image.png

sibling用于存放当前节点的下一个兄弟节点,这里指向的是a标签 image.png