stack reconciler的缺点
stack reconciler在渲染和更新过程，使用递归来遍历。由于依赖于内置调用栈，当协调工作开始执行，就会一直执行下去，直到协调工作结束，整个过程无法中断。而js线程和渲染线程互斥，随着应用规模增大，如果在协调算法耗时过长，就会导致应用卡顿，掉帧，影响用户体验。
具体的stack reconciler算法可以查阅官方文档
fiber reconciler
为了可以实现运行时可中断，恢复，停止等操作，react fiber新的底层协调算法引入的一个新的数据结构（双向链表），基于fiber新的协调算法叫做fiber reconciler，在渲染和更新过程，使用递归来遍历。由于依赖于内置调用栈，当协调工作开始执行，就会一直执行下去，直到协调工作结束，整个过程无法中断。而js线程和渲染线程互斥，随着应用规模增大，如果在协调算法耗时过长，就会导致应用卡顿，掉帧，影响用户体验。
fiber对象结构
type Fiber = {|
tag: WorkTag, // fiber 类型，影响内部逻辑，包含 FunctionComponent
key: null | string,
elementType: any, // react 元素类型
type: any, // 组件构造function / class
stateNode: any, // host 元素
return: Fiber | null, // 父节点
child: Fiber | null, // 子节点
sibling: Fiber | null, // 兄弟节点
index: number,
pendingProps: any, // 待使用的 props
memoizedProps: any, // 已使用的 props
updateQueue: mixed, // 状态更新或回调链表
memoizedState: any, // 状态
flags: Flags, // fiber 节点包含的副作用标识
subtreeFlags: Flags, // 子树包含的副作用标识，避免深度遍历
deletions: Array<Fiber> | null, // 删除的节点，用于执行 unmount 钩子
lanes: Lanes, // 优先级相关，用于计算过期时间
childLanes: Lanes,
alternate: Fiber | null, // current fiber、workInProgress fiber 相互持有对方
|};
这里重点说明，return，sibling，child 指针三者的关系，举个例子
<App>
<Header />
<Body>
<Content />
</Body>
</App>
App组件最终生成的fiber树结构如下
本文为原创，未经授权，禁止任何媒体或个人自媒体转载
商业侵权必究，如需授权请联系340443366@qq.com
最新评论