老师，对于 Fiber 的 updateQuene 有一个很疑惑的问题请教

Question

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

Answer 1

提问者 qq_月色里肆无忌惮的浅忆_0 2020-02-12 20:16:46

UpdateQueue 的数据结构是这样的

```js

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`

```js

const updatePayload = prepareUpdate(

instance,

type,

oldProps,

newProps,

rootContainerInstance,

currentHostContext,

);

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

workInProgress.updateQueue = updatePayload;

```

`prepareUpdate` 执行完之后返回的是一个数组

Answer 2

Jokcy 2020-02-12 18:36:51

能给个具体代码么，细节我记得没这么清除了

• 提问者 qq_月色里肆无忌惮的浅忆_0 #1

  UpdateQueue 的数据结构是这样的
  
  ```js
  
  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`
  
  ```js
  
  const updatePayload = prepareUpdate(
  
  instance,
  
  type,
  
  oldProps,
  
  newProps,
  
  rootContainerInstance,
  
  currentHostContext,
  
  );
  
  // TODO: Type this specific to this type of component.
  
  workInProgress.updateQueue = updatePayload;
  
  ```
  
  `prepareUpdate` 执行完之后返回的是一个数组