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, E

D会被执行两次

0
0

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

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

1749 学习 · 336 问题

查看课程