135-1821-9792

带你了解React中的优先级

 UI产生交互的根本原因是各种事件，这也就意味着事件与更新有着直接关系。不同事件产生的更新，它们的优先级是有差异的，所以更新优先级的根源在于事件的优先级。一个更新的产生可直接导致React生成一个更新任务，最终这个任务被Scheduler调度。

所以在React中，人为地将事件划分了等级，最终目的是决定调度任务的轻重缓急，因此，React有一套从事件到调度的优先级机制。

本文将围绕事件优先级、更新优先级、任务优先级、调度优先级，重点梳理它们之间的转化关系。

  •  事件优先级：按照用户事件的交互紧急程度，划分的优先级
  •  更新优先级：事件导致React产生的更新对象（update）的优先级（update.lane）
  •  任务优先级：产生更新对象之后，React去执行一个更新任务，这个任务所持有的优先级
  •  调度优先级：Scheduler依据React更新任务生成一个调度任务，这个调度任务所持有的优先级

前三者属于React的优先级机制，第四个属于Scheduler的优先级机制，Scheduler内部有自己的优先级机制，虽然与React有所区别，但等级的划分基本一致。下面我们从事件优先级开始说起。

优先级的起点：事件优先级

React按照事件的紧急程度，把它们划分成三个等级：

  •  离散事件（DiscreteEvent）：click、keydown、focusin等，这些事件的触发不是连续的，优先级为0。
  •  用户阻塞事件（UserBlockingEvent）：drag、scroll、mouseover等，特点是连续触发，阻塞渲染，优先级为1。
  •  连续事件（ContinuousEvent）：canplay、error、audio标签的timeupdate和canplay，优先级最高，为2。

事件优先级的Map

派发事件优先级

事件优先级是在注册阶段被确定的，在向root上注册事件时，会根据事件的类别，创建不同优先级的事件监听（listener），最终将它绑定到root上去。

 
 
 
 
    
  
  
  
  
  1. let listener = createEventListenerWrapperWithPriority( 
    2. 
  
  
  
  
  2.     targetContainer, 
    3. 
  
  
  
  
  3.     domEventName, 
    4. 
  
  
  
  
  4.     eventSystemFlags, 
    5. 
  
  
  
  
  5.     listenerPriority, 
    6. 
  
  
  
  
  6.   );
    7.

createEventListenerWrapperWithPriority函数的名字已经把它做的事情交代得八九不离十了。它会首先根据事件的名称去找对应的事件优先级，然后依据优先级返回不同的事件监听函数。

 
 
 
 
    
  
  
  
  
  1. export function createEventListenerWrapperWithPriority( 
    2. 
  
  
  
  
  2.   targetContainer: EventTarget, 
    3. 
  
  
  
  
  3.   domEventName: DOMEventName, 
    4. 
  
  
  
  
  4.   eventSystemFlags: EventSystemFlags, 
    5. 
  
  
  
  
  5.   priority?: EventPriority,
    6. 
  
  
  
  
  6. ): Function { 
    7. 
  
  
  
  
  7.   const eventPriority = 
    8. 
  
  
  
  
  8.     priority === undefined 
    9. 
  
  
  
  
  9.       ? getEventPriorityForPluginSystem(domEventName) 
    10. 
  
  
  
  
  10.       : priority; 
    11. 
  
  
  
  
  11.   let listenerWrapper; 
    12. 
  
  
  
  
  12.   switch (eventPriority) { 
    13. 
  
  
  
  
  13.     case DiscreteEvent: 
    14. 
  
  
  
  
  14.       listenerWrapper = dispatchDiscreteEvent; 
    15. 
  
  
  
  
  15.       break; 
    16. 
  
  
  
  
  16.     case UserBlockingEvent: 
    17. 
  
  
  
  
  17.       listenerWrapper = dispatchUserBlockingUpdate; 
    18. 
  
  
  
  
  18.       break; 
    19. 
  
  
  
  
  19.     case ContinuousEvent: 
    20. 
  
  
  
  
  20.     default: 
    21. 
  
  
  
  
  21.       listenerWrapper = dispatchEvent; 
    22. 
  
  
  
  
  22.       break; 
    23. 
  
  
  
  
  23.   } 
    24. 
  
  
  
  
  24.   return listenerWrapper.bind( 
    25. 
  
  
  
  
  25.     null, 
    26. 
  
  
  
  
  26.     domEventName, 
    27. 
  
  
  
  
  27.     eventSystemFlags, 
    28. 
  
  
  
  
  28.     targetContainer, 
    29. 
  
  
  
  
  29.   ); 
    30. 
  
  
  
  
  30. }
    31.

最终绑定到root上的事件监听其实是dispatchDiscreteEvent、dispatchUserBlockingUpdate、dispatchEvent这三个中的一个。它们做的事情都是一样的，以各自的事件优先级去执行真正的事件处理函数。

比如：dispatchDiscreteEvent和dispatchUserBlockingUpdate最终都会以UserBlockingEvent的事件级别去执行事件处理函数。

以某种优先级去执行事件处理函数其实要借助Scheduler中提供的runWithPriority函数来实现：

 
 
 
 
    
  
  
  
  
  1. function dispatchUserBlockingUpdate( 
    2. 
  
  
  
  
  2.   domEventName, 
    3. 
  
  
  
  
  3.   eventSystemFlags, 
    4. 
  
  
  
  
  4.   container, 
    5. 
  
  
  
  
  5.   nativeEvent, 
    6. 
  
  
  
  
  6. ) { 
    7. 
  
  
  
  
  7.   ... 
    8. 
  
  
  
  
  8.   runWithPriority( 
    9. 
  
  
  
  
  9.     UserBlockingPriority, 
    10. 
  
  
  
  
  10.     dispatchEvent.bind( 
    11. 
  
  
  
  
  11.       null, 
    12. 
  
  
  
  
  12.       domEventName, 
    13. 
  
  
  
  
  13.       eventSystemFlags, 
    14. 
  
  
  
  
  14.       container, 
    15. 
  
  
  
  
  15.       nativeEvent, 
    16. 
  
  
  
  
  16.     ), 
    17. 
  
  
  
  
  17.   ); 
    18. 
  
  
  
  
  18.   ... 
    19. 
  
  
  
  
  19. }
    20.

这么做可以将事件优先级记录到Scheduler中，相当于告诉Scheduler：你帮我记录一下当前事件派发的优先级，等React那边创建更新对象（即update）计算更新优先级时直接从你这拿就好了。

 
 
 
 
    
  
  
  
  
  1. function unstable_runWithPriority(priorityLevel, eventHandler) { 
    2. 
  
  
  
  
  2.   switch (priorityLevel) { 
    3. 
  
  
  
  
  3.     case ImmediatePriority: 
    4. 
  
  
  
  
  4.     case UserBlockingPriority: 
    5. 
  
  
  
  
  5.     case NormalPriority:
    6. 
  
  
  
  
  6.      case LowPriority: 
    7. 
  
  
  
  
  7.     case IdlePriority: 
    8. 
  
  
  
  
  8.       break; 
    9. 
  
  
  
  
  9.     default: 
    10. 
  
  
  
  
  10.       priorityLevel = NormalPriority; 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12.   var previousPriorityLevel = currentPriorityLevel; 
    13. 
  
  
  
  
  13.   // 记录优先级到Scheduler内部的变量里 
    14. 
  
  
  
  
  14.   currentPriorityLevel = priorityLevel; 
    15. 
  
  
  
  
  15.   try { 
    16. 
  
  
  
  
  16.     return eventHandler(); 
    17. 
  
  
  
  
  17.   } finally { 
    18. 
  
  
  
  
  18.     currentPriorityLevel = previousPriorityLevel; 
    19. 
  
  
  
  
  19.   } 
    20. 
  
  
  
  
  20. }
    21.

更新优先级

以setState为例，事件的执行会导致setState执行，而setState本质上是调用enqueueSetState，生成一个update对象，这时候会计算它的更新优先级，即update.lane：

 
 
 
 
    
  
  
  
  
  1. const classComponentUpdater = { 
    2. 
  
  
  
  
  2.   enqueueSetState(inst, payload, callback) { 
    3. 
  
  
  
  
  3.     ... 
    4. 
  
  
  
  
  4.     // 依据事件优先级创建update的优先级 
    5. 
  
  
  
  
  5.     const lane = requestUpdateLane(fiber, suspenseConfig); 
    6. 
  
  
  
  
  6.     const update = createUpdate(eventTime, lane, suspenseConfig); 
    7. 
  
  
  
  
  7.     update.payload = payload; 
    8. 
  
  
  
  
  8.     enqueueUpdate(fiber, update); 
    9. 
  
  
  
  
  9.     // 开始调度 
    10. 
  
  
  
  
  10.     scheduleUpdateOnFiber(fiber, lane, eventTime); 
    11. 
  
  
  
  
  11.     ... 
    12. 
  
  
  
  
  12.   }, 
    13. 
  
  
  
  
  13. };
    14.

重点关注requestUpdateLane，它首先找出Scheduler中记录的优先级：schedulerPriority，然后计算更新优先级：lane，具体的计算过程在findUpdateLane函数中，计算过程是一个从高到低依次占用空闲位的操作，具体的代码在这里 ，这里就先不详细展开。

 
 
 
 
    
  
  
  
  
  1. export function requestUpdateLane( 
    2. 
  
  
  
  
  2.   fiber: Fiber, 
    3. 
  
  
  
  
  3.   suspenseConfig: SuspenseConfig | null, 
    4. 
  
  
  
  
  4. ): Lane { 
    5. 
  
  
  
  
  5.   ... 
    6. 
  
  
  
  
  6.   // 根据记录下的事件优先级，获取任务调度优先级 
    7. 
  
  
  
  
  7.   const schedulerPriority = getCurrentPriorityLevel(); 
    8. 
  
  
  
  
  8.   let lane; 
    9. 
  
  
  
  
  9.   if ( 
    10. 
  
  
  
  
  10.     (executionContext & DiscreteEventContext) !== NoContext && 
    11. 
  
  
  
  
  11.     schedulerPriority === UserBlockingSchedulerPriority 
    12. 
  
  
  
  
  12.   ) { 
    13. 
  
  
  
  
  13.     // 如果事件优先级是用户阻塞级别，则直接用InputDiscreteLanePriority去计算更新优先级 
    14. 
  
  
  
  
  14.     lane = findUpdateLane(InputDiscreteLanePriority, currentEventWipLanes); 
    15. 
  
  
  
  
  15.   } else { 
    16. 
  
  
  
  
  16.     // 依据事件的优先级去计算schedulerLanePriority 
    17. 
  
  
  
  
  17.     const schedulerLanePriority = schedulerPriorityToLanePriority( 
    18. 
  
  
  
  
  18.       schedulerPriority, 
    19. 
  
  
  
  
  19.     ); 
    20. 
  
  
  
  
  20.     ... 
    21. 
  
  
  
  
  21.     // 根据事件优先级计算得来的schedulerLanePriority，去计算更新优先级 
    22. 
  
  
  
  
  22.     lane = findUpdateLane(schedulerLanePriority, currentEventWipLanes); 
    23. 
  
  
  
  
  23.   } 
    24. 
  
  
  
  
  24.   return lane; 
    25. 
  
  
  
  
  25. }
    26.

getCurrentPriorityLevel负责读取记录在Scheduler中的优先级：

 
 
 
 
    
  
  
  
  
  1. function unstable_getCurrentPriorityLevel() { 
    2. 
  
  
  
  
  2.   return currentPriorityLevel; 
    3. 
  
  
  
  
  3. }
    4.

update对象创建完成后意味着需要对页面进行更新，会调用scheduleUpdateOnFiber进入调度，而真正开始调度之前会计算本次产生的更新任务的任务优先级，目的是与已有任务的任务优先级去做比较，便于做出多任务的调度决策。

调度决策的逻辑在ensureRootIsScheduled 函数中，这是一个非常重要的函数，控制着React任务进入Scheduler的大门。

任务优先级

一个update会被一个React的更新任务执行掉，任务优先级被用来区分多个更新任务的紧急程度，它由更新优先级计算而来，举例来说：

假设产生一前一后两个update，它们持有各自的更新优先级，也会被各自的更新任务执行。经过优先级计算，如果后者的任务优先级高于前者的任务优先级，那么会让Scheduler取消前者的任务调度；如果后者的任务优先级等于前者的任务优先级，后者不会导致前者被取消，而是会复用前者的更新任务，将两个同等优先级的更新收敛到一次任务中；如果后者的任务优先级低于前者的任务优先级，同样不会导致前者的任务被取消，而是在前者更新完成后，再次用Scheduler对后者发起一次任务调度。

这是任务优先级存在的意义，保证高优先级任务及时响应，收敛同等优先级的任务调度。

任务优先级在即将调度的时候去计算，代码在ensureRootIsScheduled函数中：

 
 
 
 
    
  
  
  
  
  1. function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { 
    2. 
  
  
  
  
  2.   ... 
    3. 
  
  
  
  
  3.   // 获取nextLanes，顺便计算任务优先级 
    4. 
  
  
  
  
  4.   const nextLanes = getNextLanes( 
    5. 
  
  
  
  
  5.     root, 
    6. 
  
  
  
  
  6.     root === workInProgressRoot ? workInProgressRootRenderLanes : NoLanes, 
    7. 
  
  
  
  
  7.   ); 
    8. 
  
  
  
  
  8.   // 获取上面计算得出的任务优先级 
    9. 
  
  
  
  
  9.   const newCallbackPriority = returnNextLanesPriority(); 
    10. 
  
  
  
  
  10.   ... 
    11. 
  
  
  
  
  11. }
    12.

通过调用getNextLanes去计算在本次更新中应该处理的这批lanes（nextLanes），getNextLanes会调用getHighestPriorityLanes去计算任务优先级。任务优先级计算的原理是这样：更新优先级（update的lane），它会被并入root.pendingLanes，root.pendingLanes经过getNextLanes处理后，挑出那些应该处理的lanes，传入getHighestPriorityLanes，根据nextLanes找出这些lanes的优先级作为任务优先级。

 
 
 
 
    
  
  
  
  
  1. function getHighestPriorityLanes(lanes: Lanes | Lane): Lanes {  ... 
    2. 
  
  
  
  
  2.   // 都是这种比较赋值的过程，这里只保留两个以做简要说明 
    3. 
  
  
  
  
  3.   const inputDiscreteLanes = InputDiscreteLanes & lanes; 
    4. 
  
  
  
  
  4.   if (inputDiscreteLanes !== NoLanes) { 
    5. 
  
  
  
  
  5.     return_highestLanePriority = InputDiscreteLanePriority; 
    6. 
  
  
  
  
  6.     return inputDiscreteLanes; 
    7. 
  
  
  
  
  7.   } 
    8. 
  
  
  
  
  8.   if ((lanes & InputContinuousHydrationLane) !== NoLanes) {
    9. 
  
  
  
  
  9.     return_highestLanePriority = InputContinuousHydrationLanePriority; 
    10. 
  
  
  
  
  10.     return InputContinuousHydrationLane; 
    11. 
  
  
  
  
  11.   } 
    12. 
  
  
  
  
  12.   ... 
    13. 
  
  
  
  
  13.   return lanes; 
    14. 
  
  
  
  
  14. }
    15.

getHighestPriorityLanes的源码在这里，getNextLanes的源码在这里

return_highestLanePriority就是任务优先级，它有如下这些值，值越大，优先级越高，暂时只理解任务优先级的作用即可。

 
 
 
 
    
  
  
  
  
  1. export const SyncLanePriority: LanePriority = 17; 
    2. 
  
  
  
  
  2. export const SyncBatchedLanePriority: LanePriority = 16; 
    3. 
  
  
  
  
  3. const InputDiscreteHydrationLanePriority: LanePriority = 15; 
    4. 
  
  
  
  
  4. export const InputDiscreteLanePriority: LanePriority = 14; 
    5. 
  
  
  
  
  5. const InputContinuousHydrationLanePriority: LanePriority = 13; 
    6. 
  
  
  
  
  6. export const InputContinuousLanePriority: LanePriority = 12; 
    7. 
  
  
  
  
  7. const DefaultHydrationLanePriority: LanePriority = 11; 
    8. 
  
  
  
  
  8. export const DefaultLanePriority: LanePriority = 10; 
    9. 
  
  
  
  
  9. const TransitionShortHydrationLanePriority: LanePriority = 9; 
    10. 
  
  
  
  
  10. export const TransitionShortLanePriority: LanePriority = 8; 
    11. 
  
  
  
  
  11. const TransitionLongHydrationLanePriority: LanePriority = 7; 
    12. 
  
  
  
  
  12. export const TransitionLongLanePriority: LanePriority = 6; 
    13. 
  
  
  
  
  13. const RetryLanePriority: LanePriority = 5; 
    14. 
  
  
  
  
  14. const SelectiveHydrationLanePriority: LanePriority = 4; 
    15. 
  
  
  
  
  15. const IdleHydrationLanePriority: LanePriority = 3; 
    16. 
  
  
  
  
  16. const IdleLanePriority: LanePriority = 2; 
    17. 
  
  
  
  
  17. const OffscreenLanePriority: LanePriority = 1; 
    18. 
  
  
  
  
  18. export const NoLanePriority: LanePriority = 0;
    19.

如果已经存在一个更新任务，ensureRootIsScheduled会在获取到新任务的任务优先级之后，去和旧任务的任务优先级去比较，从而做出是否需要重新发起调度的决定，若需要发起调度，那么会去计算调度优先级。

调度优先级

一旦任务被调度，那么它就会进入Scheduler，在Scheduler中，这个任务会被包装一下，生成一个属于Scheduler自己的task，这个task持有的优先级就是调度优先级。

它有什么作用呢？在Scheduler中，分别用过期任务队列和未过期任务的队列去管理它内部的task，过期任务的队列中的task根据过期时间去排序，最早过期的排在前面，便于被最先处理。而过期时间是由调度优先级计算得出的，不同的调度优先级对应的过期时间不同。

调度优先级由任务优先级计算得出，在ensureRootIsScheduled更新真正让Scheduler发起调度的时候，会去计算调度优先级。

 
 
 
 
    
  
  
  
  
  1. function ensureRootIsScheduled(root: FiberRoot, currentTime: number) { 
    2. 
  
  
  
  
  2.     ... 
    3. 
  
  
  
  
  3.     // 根据任务优先级获取Scheduler的调度优先级 
    4. 
  
  
  
  
  4.     const schedulerPriorityLevel = lanePriorityToSchedulerPriority( 
    5. 
  
  
  
  
  5.       newCallbackPriority, 
    6. 
  
  
  
  
  6.     ); 
    7. 
  
  
  
  
  7.     // 计算出调度优先级之后，开始让Scheduler调度React的更新任务 
    8. 
  
  
  
  
  8.     newCallbackNode = scheduleCallback( 
    9. 
  
  
  
  
  9.       schedulerPriorityLevel, 
    10. 
  
  
  
  
  10.       performConcurrentWorkOnRoot.bind(null, root), 
    11. 
  
  
  
  
  11.     ); 
    12. 
  
  
  
  
  12.     ...
    13. 
  
  
  
  
  13. }
    14.

lanePriorityToSchedulerPriority计算调度优先级的过程是根据任务优先级找出对应的调度优先级。

 
 
 
 
    
  
  
  
  
  1. export function lanePriorityToSchedulerPriority( 
    2. 
  
  
  
  
  2.   lanePriority: LanePriority, 
    3. 
  
  
  
  
  3. ): ReactPriorityLevel { 
    4. 
  
  
  
  
  4.   switch (lanePriority) { 
    5. 
  
  
  
  
  5.     case SyncLanePriority: 
    6. 
  
  
  
  
  6.     case SyncBatchedLanePriority: 
    7. 
  
  
  
  
  7.       return ImmediateSchedulerPriority; 
    8. 
  
  
  
  
  8.     case InputDiscreteHydrationLanePriority: 
    9. 
  
  
  
  
  9.     case InputDiscreteLanePriority: 
    10. 
  
  
  
  
  10.     case InputContinuousHydrationLanePriority: 
    11. 
  
  
  
  
  11.     case InputContinuousLanePriority: 
    12. 
  
  
  
  
  12.       return UserBlockingSchedulerPriority; 
    13. 
  
  
  
  
  13.     case DefaultHydrationLanePriority: 
    14. 
  
  
  
  
  14.     case DefaultLanePriority: 
    15. 
  
  
  
  
  15.     case TransitionShortHydrationLanePriority: 
    16. 
  
  
  
  
  16.     case TransitionShortLanePriority: 
    17. 
  
  
  
  
  17.     case TransitionLongHydrationLanePriority: 
    18. 
  
  
  
  
  18.     case TransitionLongLanePriority: 
    19. 
  
  
  
  
  19.     case SelectiveHydrationLanePriority: 
    20. 
  
  
  
  
  20.     case RetryLanePriority: 
    21. 
  
  
  
  
  21.       return NormalSchedulerPriority; 
    22. 
  
  
  
  
  22.     case IdleHydrationLanePriority: 
    23. 
  
  
  
  
  23.     case IdleLanePriority:
    24. 
  
  
  
  
  24.     case OffscreenLanePriority: 
    25. 
  
  
  
  
  25.       return IdleSchedulerPriority; 
    26. 
  
  
  
  
  26.     case NoLanePriority: 
    27. 
  
  
  
  
  27.       return NoSchedulerPriority; 
    28. 
  
  
  
  
  28.     default: 
    29. 
  
  
  
  
  29.       invariant( 
    30. 
  
  
  
  
  30.         false, 
    31. 
  
  
  
  
  31.         'Invalid update priority: %s. This is a bug in React.', 
    32. 
  
  
  
  
  32.         lanePriority,
    33. 
  
  
  
  
  33.        ); 
    34. 
  
  
  
  
  34.   } 
    35. 
  
  
  
  
  35. }
    36.

总结

本文一共提到了4种优先级：事件优先级、更新优先级、任务优先级、调度优先级，它们之间是递进的关系。事件优先级由事件本身决定，更新优先级由事件计算得出，然后放到root.pendingLanes，任务优先级来自root.pendingLanes中最紧急的那些lanes对应的优先级，调度优先级根据任务优先级获取。几种优先级环环相扣，保证了高优任务的优先执行。


分享名称：带你了解React中的优先级
本文来源：http://wtcwzsj.com/article/cojchho.html

其他资讯


关于我们
我们的服务
网站建设案例
新闻动态
联系我们

135-1821-9792

公司服务热线
友情链接： 精工不锈钢精品字   成都网页设计   绵阳发电机公司   簇桥薇薇新娘   成都云服务器   双流做网站   域名申请   成都五金件   百度推广公司   成都办公窗帘   

Copyright © 2009-2022 www.wtcwzsj.com 青羊区广皓图文设计工作室（个体工商户） 版权所有　蜀ICP备19037934号