Scheduling in React

React is a popular JavaScript library for building user interfaces, and it's known for its fast rendering performance. One of the key features that enables this performance is the scheduling mechanism that React uses under the hood.

What is scheduling?

Scheduling is the process of determining when and how often a task should be executed. In the context of React, scheduling refers to the way that React decides when to render components and update the DOM.

In traditional web development, updates to the DOM are typically done synchronously, meaning that they happen immediately when some state changes. However, this approach can lead to poor performance, especially when there are many updates happening at once.

React takes a different approach. Instead of updating the DOM immediately, it schedules updates to happen at a later time. This allows React to batch multiple updates together and perform them all at once, which can greatly improve performance.

How does scheduling work in React?

React's scheduling mechanism is based on two main concepts:

1. The event loop: The browser has an event loop that manages tasks and events. When a task is added to the event loop, it will be executed as soon as possible, but only when the browser is idle.

2. Priority levels: Each task in the event loop has a priority level. Higher-priority tasks will be executed before lower-priority tasks.

React makes use of both of these concepts to schedule updates to components. When you call setState or update a prop, React doesn't immediately update the component. Instead, it creates a new update object and adds it to a queue. Then, at some point in the future, React will flush the queue and apply all the updates.

The timing of when React flushes the queue depends on the priority level of the updates. React has several priority levels, including:

• Immediate: Updates with this priority will be flushed synchronously, meaning that they will be applied immediately.

• User blocking: Updates with this priority will be flushed before the next paint, meaning that they will be applied before the browser paints the next frame. These updates are typically used for interactions that need to have low latency, such as responding to user input.

• Normal: Updates with this priority will be flushed after the next paint, meaning that they will be applied in the next frame. These updates are typically used for most UI updates.

• Low: Updates with this priority will be deferred until the browser is idle. These updates are typically used for non-critical updates, such as preloading data or performing analytics.

React also has a special priority level called Concurrent. Updates with this priority will be split into smaller tasks and interleaved with other high-priority tasks, allowing React to perform work while keeping the app responsive. However, using Concurrent mode requires some additional setup and can be more complex to use correctly.

Example code

Here's an example of how scheduling works in React:

-- -------------------- ---- -------
------ - -------- - ---- --------

-------- --------- -
  ----- ------- --------- - ------------

  -------- ------------- -
    -------------- - ---
    -------------- - ---
  -

  ------ -
    -----
      --------- -----------
      ------- ----------------------------------------
    ------
  --
-

In this example, we have a Counter component that displays a count and a button. When the button is clicked, we call setCount twice, which increments the count by two.

However, if you run this code, you'll see that the count only increments by one. That's because both calls to setCount are batched together and treated as a single update. If we want to increment the count by two, we need to pass a function to setCount that takes the previous count as an argument:

function handleClick() {
  setCount(prevCount => prevCount + 1);
  setCount(prevCount => prevCount + 1);
}

Now when we click the button, the count will increment by two.

Conclusion

Scheduling is a key feature of React that enables it to achieve fast rendering performance. By scheduling updates to components instead of updating the DOM immediately, React can batch multiple updates together and perform them all at once, which can greatly improve performance.

Understanding how scheduling works in React can help you write more efficient and responsive UI code. By using the right priority levels for your updates and taking advantage of Concurrent mode when appropriate, you can create apps that feel fast and smooth even as they handle complex interactions and large amounts of data.

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57002