Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to understand the priority in React". The content of the explanation in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to understand the priority in React".

The root cause of UI interaction is a variety of events, which means that events are directly related to updates. Updates generated by different events have different priorities, so the root of the update priority lies in the priority of the event. The generation of an update can directly cause React to generate an update task that is eventually scheduled by Scheduler.

Therefore, in React, events are artificially graded, and the ultimate goal is to determine the priority of scheduling tasks. Therefore, React has a set of priority mechanism from event to scheduling.

This paper will focus on the transformation relationship among event priority, update priority, task priority and scheduling priority.

Event priority: the priority according to the interactive urgency of the user event

Update priority: the priority (update.lane) of the update object (update) generated by the event that caused the React

Task priority: after the update object is generated, React performs an update task, the priority held by this task

Scheduling priority: Scheduler generates a scheduling task based on the React update task, and the priority held by this scheduling task

The first three belong to the priority mechanism of React, and the fourth belongs to the priority mechanism of Scheduler. Scheduler has its own priority mechanism, although it is different from React, but the classification is basically the same. Let's start with event priority.

Starting point of priority: event priority

React divides events into three levels according to their urgency:

Discrete events (DiscreteEvent): click, keydown, focusin, etc. The triggers of these events are not continuous and have a priority of 0.

User blocking events (UserBlockingEvent): drag, scroll, mouseover, etc., characterized by continuous trigger, blocking rendering, priority of 1.

Continuous events (ContinuousEvent): timeupdate and canplay for canplay, error, and audio tags, with the highest priority of 2.

Map of event priority

Dispatch event priority

The event priority is determined during the registration phase, and when the event is registered with the root, different priority event listeners (listener) are created according to the category of the event, and eventually bound to the root.

Let listener = createEventListenerWrapperWithPriority (targetContainer, domEventName, eventSystemFlags, listenerPriority,)

The name of the createEventListenerWrapperWithPriority function already gives a close account of what it does. It will first find the corresponding event priority according to the name of the event, and then return different event listener functions according to the priority.

Export function createEventListenerWrapperWithPriority (targetContainer: EventTarget, domEventName: DOMEventName, eventSystemFlags: EventSystemFlags, priority?: EventPriority,): Function {const eventPriority = priority = = undefined? GetEventPriorityForPluginSystem (domEventName): priority; let listenerWrapper; switch (eventPriority) {case DiscreteEvent: listenerWrapper = dispatchDiscreteEvent; break; case UserBlockingEvent: listenerWrapper = dispatchUserBlockingUpdate; break; case ContinuousEvent: default: listenerWrapper = dispatchEvent; break;} return listenerWrapper.bind (null, domEventName, eventSystemFlags, targetContainer,);}

The event listener eventually bound to root is actually one of dispatchDiscreteEvent, dispatchUserBlockingUpdate, and dispatchEvent. They all do the same thing, executing real event handlers at their respective event priorities.

For example, both dispatchDiscreteEvent and dispatchUserBlockingUpdate will eventually execute event handlers at the event level of UserBlockingEvent.

Executing event handlers at a certain priority is actually achieved by using the runWithPriority function provided in Scheduler:

Function dispatchUserBlockingUpdate (domEventName, eventSystemFlags, container, nativeEvent,) {... RunWithPriority (UserBlockingPriority, dispatchEvent.bind (null, domEventName, eventSystemFlags, container, nativeEvent,);...}

By doing this, you can record the event priority in Scheduler, which is equivalent to telling Scheduler: you can record the priority of the current event dispatch for me, and wait for React to create an update object (that is, update) to calculate the update priority directly from you.

Function unstable_runWithPriority (priorityLevel, eventHandler) {switch (priorityLevel) {case ImmediatePriority: case UserBlockingPriority: case NormalPriority: case LowPriority: case IdlePriority: priorityLevel = NormalPriority;} var previousPriorityLevel = currentPriorityLevel; / / record priority to the variables inside Scheduler currentPriorityLevel = priorityLevel; try {return eventHandler ();} finally {currentPriorityLevel = previousPriorityLevel }} Update priority

Take setState as an example, the execution of the event causes setState execution, while setState essentially calls enqueueSetState to generate a update object, which calculates its update priority, that is, update.lane:

Const classComponentUpdater = {enqueueSetState (inst, payload, callback) {. / / create update based on event priority const lane = requestUpdateLane (fiber, suspenseConfig); const update = createUpdate (eventTime, lane, suspenseConfig); update.payload = payload; enqueueUpdate (fiber, update); / / start scheduling scheduleUpdateOnFiber (fiber, lane, eventTime);.},}

Focus on requestUpdateLane, which first finds out the priority recorded in Scheduler: schedulerPriority, and then calculates the update priority: lane. The specific calculation process in the findUpdateLane function is an operation that takes up free space from high to low. The specific code is here, so we won't expand it in detail here.

Export function requestUpdateLane (fiber: Fiber, suspenseConfig: SuspenseConfig | null,): Lane {. / / get the task scheduling priority according to the recorded event priority const schedulerPriority = getCurrentPriorityLevel (); let lane If ((executionContext & DiscreteEventContext)! = NoContext & & schedulerPriority = UserBlockingSchedulerPriority) {/ / if the event priority is the user blocking level, use InputDiscreteLanePriority to calculate the update priority directly lane = findUpdateLane (InputDiscreteLanePriority, currentEventWipLanes);} else {/ / calculate schedulerLanePriority const schedulerLanePriority = schedulerPriorityToLanePriority (schedulerPriority,) based on the event priority . / / calculate the update priority lane = findUpdateLane (schedulerLanePriority, currentEventWipLanes);} return lane;} based on the schedulerLanePriority calculated according to the event priority

GetCurrentPriorityLevel is responsible for reading the priority of the record in Scheduler:

Function unstable_getCurrentPriorityLevel () {return currentPriorityLevel;}

After the creation of the update object, it means that the page needs to be updated, and scheduleUpdateOnFiber will be called to schedule, and the task priority of the update task generated will be calculated before the scheduling starts. The purpose is to compare the task priority with the task priority of the existing task, so as to facilitate the scheduling decision of multi-task.

The logic of scheduling decision is in the ensureRootIsScheduled function, which is a very important function that controls the entry of React tasks into Scheduler.

Task priority

A update is executed by an React update task, and the task priority is used to distinguish the urgency of multiple update tasks, which is calculated from the update priority, for example:

Suppose two update are generated, which have their respective update priorities and will also be executed by their respective update tasks. After priority calculation, if the task priority of the latter is higher than that of the former, Scheduler will cancel the task scheduling of the former; if the task priority of the latter is equal to that of the former, the latter will not cause the former to be cancelled, but will reuse the update tasks of the former and converge two updates of the same priority into one task. If the task priority of the latter is lower than that of the former, it will not cause the task of the former to be cancelled, but will initiate a task schedule to the latter with Scheduler again after the update of the former is completed.

This is the significance of the existence of task priority, ensuring the timely response of high-priority tasks and converging the task scheduling of the same priority.

The task priority is calculated when it is about to be scheduled, and the code is in the ensureRootIsScheduled function:

Function ensureRootIsScheduled (root: FiberRoot, currentTime: number) {. / / get the nextLanes and calculate the task priority const nextLanes = getNextLanes (root, root = workInProgressRoot? WorkInProgressRootRenderLanes: NoLanes,); / / get the task priority calculated above const newCallbackPriority = returnNextLanesPriority ();...}

By calling getNextLanes to calculate the batch of lanes (nextLanes) that should be processed in this update, getNextLanes calls getHighestPriorityLanes to calculate the task priority. The principle of task priority calculation is as follows: update priority (lane of update), it will be incorporated into root.pendingLanes,root.pendingLanes after getNextLanes processing, pick out those lanes that should be processed, pass in getHighestPriorityLanes, and find out the priority of these lanes as task priority according to nextLanes.

Function getHighestPriorityLanes (lanes: Lanes | Lane): Lanes {. / / is the process of comparison assignment. Only two are retained here to briefly explain const inputDiscreteLanes = InputDiscreteLanes & lanes; if (inputDiscreteLanes! = NoLanes) {return_highestLanePriority = InputDiscreteLanePriority; return inputDiscreteLanes;} if ((lanes & InputContinuousHydrationLane)! = NoLanes) {return_highestLanePriority = InputContinuousHydrationLanePriority; return InputContinuousHydrationLane;}. Return lanes;}

The source code of getHighestPriorityLanes is here, and the source code of getNextLanes is here

Return_highestLanePriority is the task priority, it has the following values, the higher the value, the higher the priority. For the time being, you can only understand the role of task priority.

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

If an update task already exists, ensureRootIsScheduled will compare the task priority of the new task with that of the old task after obtaining the task priority of the new task, so as to decide whether to restart the scheduling. If it is necessary to initiate the scheduling, it will calculate the scheduling priority.

Scheduling priority

Once the task is scheduled, it goes into Scheduler, and in Scheduler, the task is wrapped to generate a task that belongs to Scheduler itself, and the task holds the scheduling priority.

What does it do? In Scheduler, the internal task is managed by the queue of expired tasks and the queue of unexpired tasks respectively. The task in the queue of expired tasks is sorted according to the expiration time, and the earliest expired is ranked first, so it is easy to be processed first. The expiration time is calculated by the scheduling priority, and the expiration time is different for different scheduling priorities.

The scheduling priority is calculated from the task priority, and the scheduling priority is calculated when the ensureRootIsScheduled update actually causes Scheduler to initiate the scheduling.

Function ensureRootIsScheduled (root: FiberRoot, currentTime: number) {. / / get the scheduling priority of Scheduler according to the task priority const schedulerPriorityLevel = lanePriorityToSchedulerPriority (newCallbackPriority,); / / after calculating the scheduling priority, let Scheduler schedule the update task of React newCallbackNode = scheduleCallback (schedulerPriorityLevel, performConcurrentWorkOnRoot.bind (null, root),);.}

The process of calculating scheduling priority by lanePriorityToSchedulerPriority is to find out the corresponding scheduling priority according to the task priority.

Export function lanePriorityToSchedulerPriority (lanePriority: LanePriority,): ReactPriorityLevel {switch (lanePriority) {case SyncLanePriority: case SyncBatchedLanePriority: return ImmediateSchedulerPriority; case InputDiscreteHydrationLanePriority: case InputDiscreteLanePriority: case InputContinuousHydrationLanePriority: case InputContinuousLanePriority: return UserBlockingSchedulerPriority; case DefaultHydrationLanePriority: case DefaultLanePriority: case TransitionShortHydrationLanePriority: case TransitionShortLanePriority: case TransitionLongHydrationLanePriority: case TransitionLongLanePriority: case SelectiveHydrationLanePriority: case RetryLanePriority: return NormalSchedulerPriority Case IdleHydrationLanePriority: case IdleLanePriority: case OffscreenLanePriority: return IdleSchedulerPriority; case NoLanePriority: return NoSchedulerPriority; default: invariant (false, 'Invalid update priority:% s. This is a bug in React.', lanePriority,) }} Thank you for your reading, the above is the content of "how to understand the priority in React". After the study of this article, I believe you have a deeper understanding of how to understand the priority in React, and the specific usage needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.