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

来源：7-6 commitWork更新节点属性的过程

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

2020-02-12

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

写回答

2回答

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

提问者

2020-02-12

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` 执行完之后返回的是一个数组

Jokcy

2020-02-12

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

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

UpdateQueue 的数据结构是这样的 ```js type UpdateQueue = { baseState: State, firstUpdate: Update | null, lastUpdate: Update | null, firstCapturedUpdate: Update | null, lastCapturedUpdate: Update | null, firstEffect: Update | null, lastEffect: Update | null, firstCapturedEffect: Update | null, lastCapturedEffect: Update | 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` 执行完之后返回的是一个数组

2020-02-12

共1条回复

React源码深度解析高级前端工程师必备技能

掌握React源码，让你的开发水平没有上限，更不惧前端未来的到来

1749 学习 · 336 问题

查看课程

相似问题

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

回答 1

老师，关于 fiber 的一些疑问

回答 1

update对象的expirationTime和fiber对象的expirationTime有什么区别或者关联呢？

回答 1

为什么要cloneChildFibers

回答 2

老师，关于scheduleWorkToRoot的返回值有些迷惑

回答 2

打开慕课网App查看更多内容