【React 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。最后回到根节点然后退出循环渲染的逻辑。