1. react三种模式区别

https://www.cnblogs.com/xiaochen1024/p/14851900.html

2. getNextLanes()图解

image.png

3. getNextLanes()文字版

作者:舍。
链接:https://juejin.cn/post/6999459656540094494
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

  1. expiredLanes . 一般保存的是已经过期的的任务即expirationTime<=currentTime的任务
  2. suspendedLanes. 字面意思理解即被挂起的任务。实际作用也差不多,在SuspenseComponent类型的fiber节点的更新流程中的completework阶段,在一定条件下会将该任务挂起,并将该任务的lane保存到root节点的suspendedLanes上。另外就是scheduleUpdateOnFiber中在即将开始更新前重置根节点的该字段,具体的行为是suspendedLanes上只保留比当前更新的优先级更高的任务,代码语言为

    1. var higherPriorityLanes = updateLane - 1; // Turns 0b1000 into 0b0111
    2. root.suspendedLanes &= higherPriorityLanes;
  3. pingedLanes. 在Concurrent更新模式下,若renderRootConcurrent工作时,SuspenseComponent类型的fiber节点在completework阶段会在一定条件下将workInProgressRootExitStatus标记为RootSuspended,则最终在finishConcurrentRender时,将root节点的suspendedLanes保存到pingedLanes上,详细来说是保存了这两个字段的“交集”:

    1. root.pingedLanes |= root.susp
    2. endedLanes & pingedLanes;
  4. getHighestPriorityLanes. 从当前lanes是取得优先级最高的lane。

  5. wipLanes是由该函数形参传入的。
  6. nextLanePriority . 上边流程中每一次的nextlanes赋值都会同时给该变量赋予不同的值。wipLanePriority则在getHighestPriorityLanes每次调用的时候赋值。
  7. entangledLanes. 直接贴官方注释啦:

A lane is said to be entangled with another when it’s not allowed to render in a batch that does not also include the other lane. Typically we do this when multiple updates have the same source, and we only want to respond to the most recent event from that source.

  1. 便利过程

    while (lanes > 0) { var index = pickArbitraryLaneIndex(lanes); // 返回一个二进制数中左起第一个位置为1的数的从右向左数的第n位 比方0b 101 就是2;var lane = 1 << index; // 这个lane的二进制形式表示,比方 index为2 1左移两位就是 100 nextLanes |= entanglements[index]; //更新 nextlanes lanes &= ~lane; // lanes中消除已经遍历过得lane }

  2. 总结

    总结: 需要说明的是,以上判断某个值是否为0时,总是会判断当前值是否不为0,而后才会去判断为0的逻辑,因而从以上流程图中不难看出,在计算下一次lanes时react找寻本次更新的lanes时首先会从expiredLanes上取值,若该值不存在,则会去pendingLanes上取值,而在pendingLanes上取得结果时,会将 suspendedLanes消去,最后才会是去pingedLanes上找寻结果。最后处理完entangledLanes后将结果返回。