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
最新评论