Fiber
- 前言
- 核心属性
- Fiber链表的指向关系
- Fiber链表是如何进行遍历的
前言
可能结合我的另外两篇文章来参考
React渲染流程原理揭秘
React的Fiber及中断-重启逻辑的设计
核心属性
创建Fiber的构造函数
| 属性 | 作用 | 何时赋值 |
|---|---|---|
| tag | Fiber类型（例子：0 函数组件 1 类组件），决定当前Fiber渲染逻辑的调用 | 创建Fiber的时候会根据type等信息赋予对应的值 |
| mode | 渲染类型， 0 同步阻塞渲染 1 中断-重启渲染 | 继承parent Fiber的mode值，根FiberNode的mode来自于固定传入 |
| lanes | 允许理解为还未处理的更新任务，只有这个值存在才会触发当前组件的重新执行，渲染新的内容 | 调用（const [ state, setState ] = useState()）setState回调函数之后会产生并凭借位运算符与加到该属性上 |
| child | child的FiberNode（一个或者多个，多个的时候会依据sibling串成一个child链表），但注意child永远只会保存第一个child的FiberNode | 在父Fiber渲染之后会调用reconcileChildren生成child的FiberNode，并顺势挂载到当前child的属性上 |
| return | 父FiberNode | 调用reconcileChildren生成child的FiberNode的时候顺势将parent的FiberNode挂载到return属性上 |
| sibling | 下一个兄弟FiberNode | 当存在多个child的时候，在循环遍历生成child的FiberNode的时候，顺势将下一个FiberNode赋值到sibling属性上 |
| alternate | 保存组件上一个态的快照，位后续渲染时比较新旧Fiber是否变化提供依据 | 更新周期中为当前Fiber创建child Fiber的时候会为child Fiber绑定alternate属性的值 |
| memoizedState | 记录当前组件的hook链（hook是React记录useState等钩子产生的对象，与Fiber一样也是链式的结构，通过next属性绑定关联关系） | 执行组件函数遇到useState()会产生一个hook对象，并顺势将第一个hook赋值给memoizedState属性 |
Fiber链表的指向关系
通过child，return，sibling这几个属性明确Fiber的指向关系就是核心
Fiber链表是如何进行遍历的
结合上面的图和child属性说结论，React在遍历链表Render的过程中是先深后横再回溯（child，sibling，return）。
循环的过程中，优先返回FiberNode.child作为下一次循环的值，而FiberNode.child永远只保存第一个子元素的FiberNode。因而是按照深度进行遍历，到根节点后再借助sibling遍历兄弟FiberNode，最后再借助return返回上一层节点继续遍历兄弟FiberNode。最后回到根节点然后退出循环渲染的逻辑。