02.React中的数据结构

02.React中的数据结构

FiberRoot

{|// 页面上挂载的dom节点, 就是render方法接收的第二个参数containerInfo: any,// 只有在持久更新中会用到，也就是不支持增量更新的平台，react-dom不会用到pendingChildren: any,// 当前树的根节点，就是FiberRootcurrent: Fiber,// 以下的优先级是用来区分// 1、没有提交（committed）的任务// 2、没有提交的挂起的任务// 3、没有提交的可能被挂起的任务// 我们选择不追踪每个单独的阻塞登记，为了兼顾性能// The earliest and latest priority levels that are suspended from committing.// 提交时候被挂起的最老和最新的任务earliestSuspendedTime: ExpirationTime,latestSuspendedTime: ExpirationTime,// The earliest and latest priority levels that are not known to be suspended.// 在提交时候可能会被挂起的最老和最新的任务（所有任务进来都是这个状态）earliestPendingTime: ExpirationTime,latestPendingTime: ExpirationTime,// The latest priority level that was pinged by a resolved promise and can// be retried.// 最新的通过一个promise被resolve并且可以重新尝试的优先级latestPingedTime: ExpirationTime,// 如果有错误被抛出并且没有更多的更新存在，我们尝试在处理错误前同步重新从头渲染// 在`renderRoot`出现无法处理的错误时会被设置为`true`didError: boolean,// 正在等待提交的任务的`expirationTime`pendingCommitExpirationTime: ExpirationTime,// 已经完成的任务的FiberRoot对象，如果你只有一个Root，那他永远只可能是这个Root对应的Fiber，或者是null// 在commit阶段只会处理这个值对应的任务finishedWork: Fiber | null,// 在任务被挂起的时候通过setTimeouth函数的返回值// 用来清理下一次如果有新的任务挂起时还没触发的timeouttimeoutHandle: TimeoutHandle | NoTimeout,// 顶层context对象，只有主动调用`renderSubtreeIntoContainer`时才会有用context: Object | null,pendingContext: Object | null,// 用来确定第一次渲染的时候是否需要融合+hydrate: boolean,// 当前root上剩余的过期时间// TODO: 提到renderer里面区处理nextExpirationTimeToWorkOn: ExpirationTime,// 当前更新对应的过期时间expirationTime: ExpirationTime,// List of top-level batches. This list indicates whether a commit should be// deferred. Also contains completion callbacks.// TODO: Lift this into the renderer// 顶层批次（批处理任务？）这个变量指明一个commit是否应该被推迟// 同时包括完成之后的回调// 貌似用在测试的时候？firstBatch: Batch | null,// Linked-list of roots// nextnextScheduledRoot: FiberRoot | null,
|};

Fiber

// Fiber对应一个组件需要被处理或者已经处理了，一个组件可以有一个或者多个Fiber
{|// Fiber的tag，用来标记不同的组件类型tag: WorkTag,// 就是组件的那个keykey: null | string,// 我们调用`createElement`的第一个参数 div/p/func/classelementType: any,// 异步组件resolved之后返回的内容，一般是`function`或者`class`type: any,// 跟当前Fiber相关本地状态（比如浏览器环境就是DOM节点）stateNode: any,// 指向他在Fiber节点树中的`parent`，用来在处理完这个节点之后向上返回return: Fiber | null,// 单链表树结构// 指向自己的第一个子节点child: Fiber | null,// 指向自己的兄弟结构// 兄弟节点的return指向同一个父节点sibling: Fiber | null,index: number,// refref: null | (((handle: mixed) => void) & {_stringRef: ?string}) | RefObject,// 新的变动带来的新的props，就是nextPropspendingProps: any, // 上一次渲染完成之后的propP，就是当前propsmemoizedProps: any, // 该Fiber对应的组件产生的Update会存放在这个队列里面updateQueue: UpdateQueue<any> | null,// 上一次渲染的时候的statememoizedState: any,// 一个列表，存放这个Fiber依赖的contextfirstContextDependency: ContextDependency<mixed> | null,// 用来描述当前Fiber和他子树的`Bitfield`// 共存的模式表示这个子树是否默认是异步渲染的// Fiber被创建的时候他会继承父Fiber// 其他的标识也可以在创建的时候被设置// 但是在创建之后不应该再被修改，特别是他的子Fiber创建之前mode: TypeOfMode,// Effect// 用来记录Side EffecteffectTag: SideEffectTag,// 单链表用来快速查找下一个side effectnextEffect: Fiber | null,// 子树中第一个side effectfirstEffect: Fiber | null,// 子树中最后一个side effectlastEffect: Fiber | null,// 代表任务在未来的哪个时间点应该被完成// 不包括他的子树产生的任务expirationTime: ExpirationTime,// 快速确定子树中是否有不在等待的变化childExpirationTime: ExpirationTime,// 在Fiber树更新的过程中，每个Fiber都会有一个跟其对应的Fiber// 我们称他为`current <==> workInProgress`// 在渲染完成之后他们会交换位置alternate: Fiber | null,// 下面是调试相关的，收集每个Fiber和子树渲染时间的actualDuration?: number,// If the Fiber is currently active in the "render" phase,// This marks the time at which the work began.// This field is only set when the enableProfilerTimer flag is enabled.actualStartTime?: number,// Duration of the most recent render time for this Fiber.// This value is not updated when we bailout for memoization purposes.// This field is only set when the enableProfilerTimer flag is enabled.selfBaseDuration?: number,// Sum of base times for all descedents of this Fiber.// This value bubbles up during the "complete" phase.// This field is only set when the enableProfilerTimer flag BaseDuration?: number,// Conceptual aliases// workInProgress : Fiber ->  alternate The alternate used for reuse happens// to be the same as work in progress.// __DEV__ only_debugID?: number,_debugSource?: Source | null,_debugOwner?: Fiber | null,_debugIsCurrentlyTiming?: boolean,
|};