fiber可以说是贯穿了整个react@16. 那么, fiber对象中存在着一些奇奇怪怪的属性, 随着源码阅读的进一步深入, 对于其中的一些重要属性有了简单了解.

更新

[2019-7-17]

  • Initial release

记录

Fiber可以说是贯穿了整个react@16.

那么, fiber对象中存在着一些奇奇怪怪的属性,

随着源码阅读的进一步深入, 对于其中的一些重要属性有了简单了解,

贴出源码以便对照:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
export type Fiber = {|

  // 标识不同的组件类型
  // FunctionComponent: 0; ClassComponent: 1...
  // 详细参考源码: https://github.com/ddzy/react/blob/master/packages/shared/ReactWorkTags.js
  tag: WorkTag,

  // 唯一标识此fiber
  // 用于DOM diff阶段
  key: null | string,

  // react元素的类型
  // createElement的第一个参数
  // 可以为ClassComponent、FunctionComponent、Symbol、HostComponent...
  elementType: any,

  // The resolved function/class/ associated with this fiber.
  type: any,

  // 该fiber节点对应的ReactElement对象
  stateNode: any,

  // fiber的父级
  return: Fiber | null,

  // 单链表树状结构
  child: Fiber | null,
  sibling: Fiber | null,
  index: number,

  // 节点的ref
  ref: null | (((handle: mixed) => void) & {_stringRef: ?string}) | RefObject,

  // 新的props
  pendingProps: any,
  // 老的props
  memoizedProps: any,

  // 组件自身的更新队列
  // 自己产生的setState、...会追加到该队列
  updateQueue: UpdateQueue<any> | null,

  // 旧的state
  memoizedState: any,

  // DOM diff相关
  // 详情参考源码: https://github.com/ddzy/react/blob/master/packages/shared/ReactSideEffectTags.js
  effectTag: SideEffectTag,

  // 单链表结构
  // 快速找到下一个产生effect的fiber节点
  nextEffect: Fiber | null,

  firstEffect: Fiber | null,
  lastEffect: Fiber | null,

  // fiber的精髓
  // 标识该组件应该在未来的某个时刻完成更新
  // expirationTime五种类型: NoWork(默认0)、Never(1)、Interactive(100 - 150)、Async(250 - 5000)、Sync(Number.MAXINTEGER)
  expirationTime: ExpirationTime,

  // 快速确定子fiber树有没有挂起的更改
  childExpirationTime: ExpirationTime,

  // fiber的镜像节点
  // 日常更新都在该节点进行
  // 也称作`WorkInProgress`
  alternate: Fiber | null,
|};