1、Fiber定义

Fiber包含三层含义：

  • 作为架构来说，之前React15的Reconciler采用递归的方式执行，数据保存在递归调用栈中，所以被称为stack Reconciler。React16的Reconciler基于Fiber节点实现，被称为Fiber Reconciler。
  • 作为静态的数据结构来说，每个Fiber节点对应一个React element，保存了该组件的类型（函数组件/类组件/原生组件…）、对应的DOM节点等信息。
  • 作为动态的工作单元来说，每个Fiber节点保存了本次更新中该组件改变的状态、要执行的工作（需要被删除/被插入页面中/被更新…）。

React Fiber 机制的实现（作为架构），是依赖下面这种数据结构（链表），每一个节点都是一个fiber。一个 fiber 包括了 child（第一个子节点）、sibling（兄弟节点）、parent（父节点）属性。

image.png

2、fiber数据结构

主要有DOM、fiber树、状态数据、副作用四种标识；

  1. type Fiber = {
  2.   /************************  DOM 实例相关  *****************************/
  4.   // 作为静态数据
  6.   // 标记不同的组件类型, 值详见 WorkTag
  7.   tag: WorkTag,
  9.   // 组件类型 div、span、组件构造函数
  10.   type: any,
  12.   // 实例对象, 如类组件的实例、原生 dom 实例, 而 function 组件没有实例, 因此该属性是空
  13.   stateNode: any,
  15.     /************************  构建 Fiber 树相关  ***************************/
  17.   // 作为架构
  19.   // 指向自己的父级 Fiber 对象
  20.   return: Fiber | null,
  22.   // 指向自己的第一个子级 Fiber 对象
  23.   child: Fiber | null,
  25.   // 指向自己的下一个兄弟 iber 对象
  26.   sibling: Fiber | null,
  28.   // 在 Fiber 树更新的过程中，每个 Fiber 都会有一个跟其对应的 Fiber
  29.   // 我们称他为 current <==> workInProgress
  30.   // 在渲染完成之后他们会交换位置
  31.   // alternate 指向当前 Fiber 在 workInProgress 树中的对应 Fiber
  32.     alternate: Fiber | null,
  34.   /************************  状态数据相关  ********************************/
  36.   // 作为动态工作单元
  38.   // 即将更新的 props
  39.   pendingProps: any, 
  40.   // 旧的 props
  41.   memoizedProps: any,
  42.   // 旧的 state
  43.   memoizedState: any,
  45.   /************************  副作用相关 ******************************/
  47.   // 该 Fiber 对应的组件产生的状态更新会存放在这个队列里面 
  48.   updateQueue: UpdateQueue<any> | null,
  50.   // 用来记录当前 Fiber 要执行的 DOM 操作
  51.   effectTag: SideEffectTag,
  53.   // 存储第一个要执行副作用的子级 Fiber 对象
  54.   firstEffect: Fiber | null,
  56.   // 存储下一个要执行副作用的子级 Fiber 对象
  57.   // 执行 DOM 渲染时要先通过 first 找到第一个, 然后通过 next 一直向后查找
  58.   nextEffect: Fiber | null,
  60.   // 存储 DOM 操作完后的副作用 比如调用生命周期函数或者钩子函数的调用
  61.   lastEffect: Fiber | null,
  63.   // 任务的过期时间
  64.   expirationTime: ExpirationTime,
  66.     // 当前组件及子组件处于何种渲染模式 详见 TypeOfMode
  67.   mode: TypeOfMode,
  68. };

3、WorkTag

文件位置：packages/shared/ReactWorkTags.js

  1. type WorkTag =
  2.   | 0
  3.   | 1
  4.   | 2
  5.   | 3
  6.   | 4
  7.   | 5
  8.   | 6
  9.   | 7
  10.   | 8
  11.   | 9
  12.   | 10
  13.   | 11
  14.   | 12
  15.   | 13
  16.   | 14
  17.   | 15
  18.   | 16
  19.   | 17
  20.   | 18
  21.   | 19
  22.   | 20
  23.   | 21
  24.   | 22;
  26. export const FunctionComponent = 0;
  27. export const ClassComponent = 1;
  28. export const IndeterminateComponent = 2;
  29. export const HostRoot = 3;
  30. export const HostPortal = 4;
  31. export const HostComponent = 5;
  32. export const HostText = 6;
  33. export const Fragment = 7;
  34. export const Mode = 8;
  35. export const ContextConsumer = 9;
  36. export const ContextProvider = 10;
  37. export const ForwardRef = 11;
  38. export const Profiler = 12;
  39. export const SuspenseComponent = 13;
  40. export const MemoComponent = 14;
  41. export const SimpleMemoComponent = 15;
  42. export const LazyComponent = 16;
  43. export const IncompleteClassComponent = 17;
  44. export const DehydratedFragment = 18;
  45. export const SuspenseListComponent = 19;
  46. export const FundamentalComponent = 20;
  47. export const ScopeComponent = 21;
  48. export const Block = 22;

4、TypeOfMode

文件位置: packages/react-reconciler/src/ReactTypeOfMode.js

  1. export type TypeOfMode = number;
  3. // 0 同步渲染模式
  4. export const NoMode = 0b0000;
  5. // 1 严格模式
  6. export const StrictMode = 0b0001;
  7. // 10 异步渲染过渡模式
  8. export const BlockingMode = 0b0010;
  9. // 100 异步渲染模式
  10. export const ConcurrentMode = 0b0100;
  11. // 1000 性能测试模式
  12. export const ProfileMode = 0b1000;

5、SideEffectTag

文件位置：packages/shared/ReactSideEffectTags.js

  1. export type SideEffectTag = number;
  3. // Don't change these two values. They're used by React Dev Tools.
  4. export const NoEffect = /*              */ 0b0000000000000; // 0
  5. export const PerformedWork = /*         */ 0b0000000000001; // 1
  7. // You can change the rest (and add more).
  8. export const Placement = /*             */ 0b0000000000010; // 2
  9. export const Update = /*                */ 0b0000000000100; // 4
  10. export const PlacementAndUpdate = /*    */ 0b0000000000110; // 6
  11. export const Deletion = /*              */ 0b0000000001000; // 8
  12. export const ContentReset = /*          */ 0b0000000010000; // 16
  13. export const Callback = /*              */ 0b0000000100000; // 32
  14. export const DidCapture = /*            */ 0b0000001000000; // 64
  15. export const Ref = /*                   */ 0b0000010000000; // 128
  16. export const Snapshot = /*              */ 0b0000100000000; // 256
  17. export const Passive = /*               */ 0b0001000000000; // 512
  18. export const Hydrating = /*             */ 0b0010000000000; // 1024
  19. export const HydratingAndUpdate = /*    */ 0b0010000000100; // 1028
  21. // Passive & Update & Callback & Ref & Snapshot
  22. export const LifecycleEffectMask = /*   */ 0b0001110100100; // 932
  24. // Union of all host effects
  25. export const HostEffectMask = /*        */ 0b0011111111111; // 2047
  27. export const Incomplete = /*            */ 0b0100000000000; // 2048
  28. export const ShouldCapture = /*         */ 0b1000000000000; // 4096