老师，对于 Fiber 的 UpdateQuene 在不同阶段数据结构的变化有疑问

来源：3-4 react-update-and-updateQueue

qq_月色里肆无忌惮的浅忆_0

2020-02-23

Fiber 的 updateQuene 在定义结构是时候是一个对象，包含 firstUpdate、firstEffect 等等属性。在调用 enquneUpdateQuene 的时候使用的是这个结构，但是在 completeWork 阶段执行 updateHostComponent 的时候 Fiber.updateQuene 就变成了一个数组，其中每两项分别是一个 key 和 value，这两种情况下数据结构改变了，不知道我理解的是否正确，如果正确这样做的目的是什么，为什么不用同一个数据结构

UpdateQueue 的数据结构是这样的


type UpdateQueue<State> = {

baseState: State,



firstUpdate: Update<State> | null,

lastUpdate: Update<State> | null,



firstCapturedUpdate: Update<State> | null,

lastCapturedUpdate: Update<State> | null,



firstEffect: Update<State> | null,

lastEffect: Update<State> | null,



firstCapturedEffect: Update<State> | null,

lastCapturedEffect: Update<State> | null,

};

在 completeWork 阶段执行 updateHostComponent 的时候代码位置react/packages/react-reconciler/src/ReactFiberCompleteWork.js/updateHostComponent


const updatePayload = prepareUpdate(

instance,

type,

oldProps,

newProps,

rootContainerInstance,

currentHostContext,

);

// TODO: Type this specific to this type of component.

workInProgress.updateQueue = updatePayload;