react fiber架构

2021-11-01

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 相互持有对方
|};

这里重点说明,returnsiblingchild 指针三者的关系,举个例子

<App>
  <Header />
  <Body>
    <Content />
  </Body>
</App>

App组件最终生成的fiber树结构如下

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: reactjs

评论

Loading...

最新评论

相关推荐

React18在SSR的重大改进
SSR指的是服务端渲染,直出html到客户端,减少首屏白屏时间,这里不对SSR过多说明,有兴趣自行查找。 hydrat...
react18新特性
React18引入一个新的API,ReactDOM.createRoot,原先的 ReactDOM.render 会被标...
前端登录凭证存储方案
现在是前后端分离时代,接口登录凭证通常使用cookie,session,web storage来实现,三种方法区别可以阅...
scroll-top-icon