I’m participating in nuggets Creators Camp # 4, click here to learn more and learn together!

The React scheduler is used to schedule tasks based on the React scheduler

After reading the article, you can learn:

  1. What tasks does react perform?
  2. Compare what to schedule tasks?
  3. What algorithm is used to prioritize tasks?

In the first mini – react to construct fiber article we know that through the window. The requestIdleCallback browser () this function using spare time to call workLoop () to construct and apply colours to a drawing, now we will by yourself write a put workLoop in RequestIdleCallback is a browser compatibility problem, and we will replace the requestIdleCallback method below.

React divides tasks into two types: taskQueue(this array is for tasks that need to be executed immediately) and timerQueue(this array is for tasks that need to be executed later)

So what are the properties of the task?

var newTask = { 
    id: taskIdCounter++, // The id when entering the array
    callback, // Execute the task
    priorityLevel, // Task priority
    startTime, // Start time currentTime + delay(option passed)
    expirationTime, // expirationTime = startTime + timeout;
    sortIndex: expirationTime, // Sort index
};

Copy the code

We start task scheduling by passing callback through scheduleCallback, declaring a newTask, If startTime is greater than currentTime, put it into timerQueue; otherwise, put it into taskQueue

The task in the taskQueue is executed first. We fetch the first task that needs to be executed, get the callback of the task and execute it. Tasks in the timerQueue are executed when all tasks in the taskQueue are completed

// A way to compare the priorities of tasks
function compare(a, b) {
  // Compare sort index first, then task id.
  const diff = a.sortIndex - b.sortIndex;
  returndiff ! = =0 ? diff : a.id - b.id;
}
Copy the code

The task execution sequence is compared according to the sortIndex size. The smaller the sortIndex size is, the earlier the task is executed. If the sortIndex size is the same, the task IDS are compared and the task ids with smaller ids are executed first.

Which brings us to the third question: How do you prioritize tasks?

Consider that the task queue is a dynamic array. Tasks push in when they need to be executed, and pop out when they’re done. It would be a waste of resources if we did a sort every time an array changed to find the smallest id or sortIndex task. React uses a minimum heap to sort tasks. The heap top is the smallest task by comparing sortIndex or ID.

Of course, some tasks are not completed in the execution process and continue to be executed at a later point. Some tasks are executed at once, and the executed tasks are removed from the task queue.

I am in this project github.com/coolara/min… Branch 3.0 implements a simple task scheduling.

Next we’ll talk about the use of mini-react hooks. Lift the veil of hooks!

As we all know, hooks are used extensively in function components; they cannot be placed in conditional statements, they must be placed in the outer layer of functions.

All right! Look forward to it!