React源码学习：Fiber 架构

Fiber架构工作原理(P39)
更新于: 2022-06-03 04:19:34

新旧架构对比

  • 旧版存在的问题
  • 新版的解决方案

Fiber是什么

  1. Fiber是React16的DOM比对的新的算法
  2. Fiber就是这个diff算法的名字(以前比对算法的名字叫 Stack)

React 设计理念

  • 代数效应 与 React 观念
  • 用于将副作用从函数中分离，在React中的实现就是 hook

Fiber纤程

可以理解为一种协程的实现。

generator 也是 js 对协程的一种实现。

Fiber要求

  • 无副作用
  • 优先级调 度(generator无法实现)

React 15 的协调器

  • 采用递归的方式执行
  • 数据在递归的调用栈中
  • 所以，他的 Reconciler 称为 Stack Reconciler 

React 16+

  • 基于 Fiber 节点实现的
  • 称为 Fiber Reconciler

三层含义

  • 作为 Filber架构
  • 作为静态数据节点
  • 作为动态工作单元
递归 fiber 的示意图
源码中的 fiber

Fiber 用遍历的方式代替递归

  • 所以这里用 return 表示 parent
  • 遍历：链表的遍历 xx.next 这种方式
  • 方便中断，继续操作
  • 如果是递归：就得重建 stack，会比较消耗时间
应用中的 fiber

Filber 源码

  • /Users/aric.zheng/github/react/packages/react-reconciler/src/ReactFiber.old.js

双缓存

为了防止渲染延时，React用了一种在内存中构建并替换下一zhen的技术称为双缓存技术

什么是 ReactFiber

  • Fiber 是一个 JS对象
  • Fiber reconciler：当前的React reconciler 就是基于 Fiber 架构实现的(React > 16)

Filter 专注于动画 和 响应式

  • 分割 work 成 chunks 和 不同优先级的任务
  • 可以暂停 和 恢复执行任务
  • 很方便的：重用或者删除不需要的部分
  • Fiber 是异步的：asynchronous
    • requestAnimationFrame: 优先级高的任务
    • requestIdleCallback: 优先级低的任务

先看一下 Old Reconciler: stack

  • 原来的是：synchronous 同步的
  • 并且是像一个 stack（递归Stack）
  • Hard to work untial “stack” was empty：这个不太理解
    • 如果有几个任务同时处理的时候，就会出现有部分任务被卡住
    • 卡住(Hard to work)
    • 原因就出在：Stack was sync and that was a problem

2个阶段

  • render (processing) - async
    • task 可以被设置优先级
    • task 可以暂停
    • task 可以被删除
    • …
    • 对应 React中的实现就是2个方法： beginWork/completeWork
  • commit(finish) - sync
    • 这里执行的就是 commitWork
    • 这个阶段是同步执行的 sync
    • 不可以被中断的

Fiber 的一些常用属性

  • type: 24 种
type 属性
  • stageNode
  • key

另一类属性

用链表的方式组织成tree

  • child(这里一定不是children，因为是链表)
  • sibling
  • return
链表的方式组织成tree

总结一下

  • tree 的方式 fibers
  • fiber = unit of work
  • filber 分2个阶段处理
    • render: 异步
    • commit: 同步

优先级调度

  • requestAnimationFrame
    • scheulders 高优先级的函数
  • requestIdleCallback
    • 调度低优先级的函数
  • polyfill，这种针对低级浏览器的方案(估计是 idleCallback，因为requetsAnimation兼容性比较好)

FiberTree

  • Current Tree
  • WorkInProgressTree

Effects

  • dom操作
  • fetch/ajax 请求
  • 重度依赖于于 filber的
  • ClassComponent，生命周期方法

React 处理一个 FiberTree

  • 什么是深度优先
    • 先处理 child
    • 再处理 sibling
    • 最后 return(parent)
  • child + sibling + return 搞定遍历过程
深度优先的遍历过程

react fiber怎样实现任务中断和恢复的？

fiber tree是一种数据结构, 每个 fiber 节点就是一个工作单元。

每个fiber会做三件事：

  • 给DOM添加element
  • 为element的children创建fiber
  • 选择执行下一个单元工作

这种数据结构的目标之一是使查找下一个工作单元变得容易。

因为一个更新fiber tree过程可能被打断，所以React Fiber一个更新过程被分为两个阶段(Phase)：

  1. 第一个阶段Reconciliation Phase和第二阶段Commit Phase。Reconciliation 阶段React Fiber会找出需要更新哪些DOM， 是可以被打断的，
  2. 但是到了第二阶段Commit Phase ，那就一鼓作气把DOM更新完，绝不会被打断。

关于具体的实现，推荐看 Build your own React

参考