processUpdateQueue有个疑问
来源:5-6 ClassComponent的更新
牛Plus
2022-04-25
let update = queue.firstUpdate;
// 执行完updateQueue的结果
let resultState = newBaseState;
while (update !== null) {
const updateExpirationTime = update.expirationTime;
if (updateExpirationTime < renderExpirationTime) {
// 说的当前update更新优先级较低 不需要在本次渲染执行
if (newFirstUpdate === null) {
// 第一个被忽略的update,等执行完 会成为updateQueue的新的头节点
newFirstUpdate = update;
// 记录第一个被忽略的更新这个时候的结果
newBaseState = resultState;
}
// 将新的更新的优先级进行更新
if (newExpirationTime < updateExpirationTime) {
newExpirationTime = updateExpirationTime;
}
} else {
// 说明当前更新是需要在当前更新内完成的 执行update, 计算结果
resultState = getStateFromUpdate(
workInProgress,
queue,
update,
resultState,
props,
instance,
);
const callback = update.callback;
...
}
update = update.next;
}
老师你好,processUpdateQueue方法的代码如图(16.8.6的版本)。
在本轮渲染的时候,如果发现了update的优先级较低,是会进行跳过,到下一次渲染的时候在来执行。对吧?通过前面的章节,我观察到,update进入到updateQueue的时候,并没有按expirationTime的优先级排列进入到updateQueue; 那么,是不是就会存在以下updateQueue的情况,(我用中文描述updateQueue中update在本次渲染中更新的情况)
[本次更新A, 本次更新B,下次更新C,本次更新D, 下次更新E]
当更新完后,第一个被忽略的更新会成为新的updateQueue的头节点,也就是会变成下列情况:
[下次更新C,本次更新D, 下次更新E]
这个队列会在第二次渲染的时候被更新,也就是说 ‘本次更新D’ 会在前后2次更新中被重复更新,是这样吗?(因为我没有看到更新完的update从updatQueue上移除掉的情况)
既然 ‘本次更新D’ 会重复更新,那‘本次更新D’的结果是否会覆盖 ‘下次更新C’ 的结果?
因为在 getStateFromUpdate方法中,我看到的是
resultState 其实最后就是
Object.assign({}, prevState, partialState);
所以这里产生了疑问,望解答
1回答
-
小时哥
2022-08-24
按照代码逻辑
第一次执行 本次更新A, 本次更新B, 本次更新D遇到优先级低的 下次更新C,则设置到nextLastBaseUpdate, 将调用完更新B的state作为nextState,
本次更新D在本次也会执行,只不过传入的state是更新B产生的state
第二次执行就会在更新B产生的state的基础上执行 C,D, ED会被执行两次
00
相似问题