Fiber 可视为虚拟的堆栈帧,单个fiber就是最小的任务单元。
fiber节点的属性
- type
- key
- sibling
- return
- child
- pendingWorkPriority
- alternate (wip fiber和current fiber是成对的)
- output 相当于函数的返回值,返回值最终提供给renderer使用。
链表与数组对比
- 数组静态分配内存,链表动态分配内存;
- 数组在内存中连续,链表不连续;
数组元素在栈区,链表元素在堆区;- 数组利用下标定位,时间复杂度为O(1),链表定位元素时间复杂度O(n);
- 数组插入或删除元素的时间复杂度O(n),链表的时间复杂度O(1);
为何要使用链表遍历 Fiber 树?
参考这篇文章。 用链表可以暂停组件的更新工作,并且在后续的某个时间段内恢复它。 React 会一直通过这种方式来遍历, 直到处理完所有的组件并且调用栈为空。
If you rely only on the [built-in] call stack, it will keep doing work until the stack is empty…Wouldn’t it be great if we could interrupt the call stack at will and manipulate stack frames manually? That’s the purpose of React Fiber.Fiber is re-implementation of the stack, specialized for React components. You can think of a single fiber as a virtual stack frame.
diff过程
自己用processon 画的