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

In this article Xiaobian for you to introduce in detail "what is the React17 heuristic update algorithm", the content is detailed, the steps are clear, the details are handled properly, I hope this "React17 heuristic update algorithm is what" article can help you solve doubts, following the editor's ideas slowly in depth, together to learn new knowledge.

Why is there a heuristic update algorithm

The running performance of the framework is the focus that framework designers need to pay attention to when designing the framework.

Vue uses template syntax to optimize certain templates at compile time.

On the other hand, the pure JS writing of React is so flexible that it is inherently deficient in compile-time optimization.

Therefore, the optimization of React is mainly at runtime.

Pain points of React15

React has been working on runtime optimization.

For example, React15 implements batchedUpdates (batch updates).

That is, multiple setState in the context of the callback function for the same event will only trigger an update.

However, if a single update is time-consuming, the page still stutters (which is common in a large application with a long maintenance time).

This is because the update process for React15 is synchronized and cannot be interrupted once the update is started until the page is rendered.

In order to solve the problem of page stutters caused by synchronous updates taking up threads for a long time, and to explore more possibilities of runtime optimization, React began refactoring and continues to this day.

The goal of refactoring is to implement Concurrent Mode (concurrent mode).

(recommended tutorial: React tutorial)

Concurrent Mode

The purpose of Concurrent Mode is to implement a set of interruptible / recoverable update mechanism.

It consists of two parts:

A set of collaborative process architecture

Heuristic update algorithm based on cooperative process architecture

Among them, the cooperative program architecture is the Fiber Reconciler implemented in React16.

We can think of Fiber Reconciler as a Generator implemented by React itself.

For a detailed introduction of Fiber Reconciler from concept to source code, please see here

The collaborative architecture allows updates to be interrupted when needed, so that browsers have time to complete style layout and style drawing, reducing stutters (dropped frames).

When the browser enters the next event loop, the collaboration architecture can resume the previous update or discard the previous update and restart the new update process.

A heuristic update algorithm is an algorithm that controls how the collaborative architecture works.

Heuristic updating algorithm of React16

What is the heuristic of the heuristic update algorithm?

Heuristics refer to scheduling updates through priority rather than explicit assignments.

The priority comes from the research results of human-computer interaction.

For example:

The research results of human-computer interaction show that:

When the user enters the content in the input box, he wants the input to respond in real time in the input box.

When the data is requested asynchronously, it is acceptable for the user to wait a while before displaying the content.

Based on this, in React16

Input box input content triggered update priority > trigger update priority after the request data is returned

Algorithm implementation in React16, 17, after executing this.setState in the component, a linked list data structure update will be generated in the corresponding fiber node of the component.

Where update.expirationTimes is a timestamp-like field, indicating priority.

ExpirationTimes is taken literally as expiration time.

The closer the value is to the current time, the higher the priority of the update.

When the update.expirationTimes exceeds the current time, it means that the update expires and the priority becomes the highest (that is, synchronization).

There may be multiple update in multiple fiber nodes of a fiber tree.

Each time Fiber Reconciler schedules an update, an expirationTimes (usually the largest one) is selected among all the update.expirationTimes of all fiber nodes as the priority for this update.

And build a new fiber tree down from the root fiber node.

During construction, if a fiber node contains update, and

Update.expirationTimes > = expirationTimes

Then the state change corresponding to the update will be reflected in this update.

It can be understood as: each update, a priority (expirationTimes) will be selected, and the final page will be rendered as a snapshot of the update corresponding to that priority.

Algorithm defect

If you only consider interrupting / continuing CPU operations, a model based on expirationTimes size as a measure of priority works well.

But the expirationTimes model does not satisfy the IO operation (Suspense).

Under this model, the high priority IO task (Suspense) interrupts the low priority CPU task.

Remember, each update is based on a priority as the priority of the entire tree, not just a component, even if the source of the update (update) is indeed generated by a component.

The expirationTimes model can only distinguish whether or not > = expirationTimes.

In order to expand the capability boundary of Concurrent Mode, a more fine-grained heuristic priority update algorithm is needed.

(recommended tutorial: React getting started example tutorial)

React17 heuristic update algorithm

The ideal model is that you can specify any number of priorities, and updates will generate page snapshots corresponding to update at these priorities.

However, under the existing architecture, there is a bottleneck in the implementation of the scheme.

In a compromise, React17's solution is to specify a continuous priority interval, and each update generates a snapshot of the corresponding page at the priority contained in the interval.

This priority interval model is called lanes (Lane Model).

To do this: use a 31-bit binary to represent 31 possibilities.

Each bit is called a lane (lane), which represents priority

The binary number composed of several lane is called a lanes, which represents a batch priority.

As you can see from the source code, all the way down the blue line, each bit corresponds to a lane or lanes.

When update is generated, one of the following priorities is given according to the same heuristic of React16:

Export const SyncLanePriority: LanePriority = 17; export const SyncBatchedLanePriority: LanePriority = 16; export const InputDiscreteLanePriority: LanePriority = 14; export const InputContinuousLanePriority: LanePriority = 12; export const DefaultLanePriority: LanePriority = 10; export const TransitionShortLanePriority: LanePriority = 8; export const TransitionLongLanePriority: LanePriority = 6

The higher the value, the higher the priority.

For example:

The update generated by the this.setState triggered in the click event callback will get the InputDiscreteLanePriority.

The synchronized update gets SyncLanePriority.

Next, update will use priority as a clue to find an unoccupied lane.

If an update already exists in the current fiber tree and the updated lanes contains that lane, update needs to look for another lane.

For example, the lanes for InputDiscreteLanePriority is InputDiscreteLanes.

/ / bit 4 and bit 5 are 1 const InputDiscreteLanes: Lanes = 0b0000000000000000000000000011000

The lanes contains 4 and 5 bits and 2 bit bits.

If one of them

/ / the fifth place is 1 0b0000000000000000000000000010000

If the fifth lane is already occupied, the update can try to occupy the latter, that is,

/ / the fourth place is 1 0b0000000000000000000000000001000

If both lane of the InputDiscreteLanes are occupied, the priority of the update is reduced to InputContinuousLanePriority and the search for free lane continues.

The process is like: each floor of the mall (different priorities) has an open-air parking lot (lanes), and the parking lot has multiple parking spaces (lane).

Let's drive to the top floor to find a parking space (lane). If there is no parking space, we will continue to look for it on the next floor.

Until we find a spare parking space.

Because lanes can contain multiple lane, it is easy to distinguish between IO operation (Suspense) and CPU operation.

When building the fiber tree enters the construction of the Suspense subtree, the lane of the Suspense is inserted into the lanes selected for this update.

When the build leaves the lanes subtree, the Suspense lane is removed from this update.

After reading this, the article "what is the React17 heuristic update algorithm" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

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.