An overview of the

React React: React React: React React

Act15 and its previous architecture

We know that before Act 16, the React architecture consisted of Renderer and Stack Reconciler.

The renderer’s job is to manage a React tree and make different calls depending on the underlying platform.

ReactDOM: Render the React component into a DOM for use in browsers and SSRReactNativeRender the React component as a Native viewReactTestRender the React component asJSON 树
ReactArt: Render the React component to Canvas, SVG, etcCopy the code

The coordinator’s job is to get the different renderers to share some logic with each other, especially the coordination algorithm, which allows declarative rendering, custom components, states, lifecycle methods, and refs to work consistently across platforms.

Existing problems

In the old framework, tasks were dealt with directly by Reconciler. In the React15 Reconciler, the mountComponent method is called for the components that are first rendered, and the updateComponent method is called for the components that need to be updated, both of which recursively update the child components. (When discovering the elements rendered by each component, The Reconciler recursively “explores down” through user-defined components). The disadvantages of recursive updates are obvious:

① The recursion cannot be interrupted once it starts ② When the recursion level is too deep, the calculation update time will exceed 16msCopy the code

Because the updating process is synchronous and the Reconciler and Renderer work alternately, after the first Reconciler is completed, the second update goes into the Reconciler to calculate the differences, making it easier for users to feel stuck in some complex scenes.

How to solve

Since this problem can occur in a synchronous update process, what about an asynchronous interruptible update process instead?

How do I fix it?

Interruptible -- Since we use whether the browser has time left as a criterion for task interruption, we need a mechanism to notify us when the browser has time leftCopy the code

Some browsers already implement the requestIdleCallback API, but due to inconsistent browser compatibility and trigger frequency, the React team chose to implement a more complete requestIdleCallback polyfill themselves. This is called the Scheduler.

Schedulers control the priority of tasks and schedule high-priority tasks first.

One example: when`Reconciler`While calculating a medium-priority task using diff algorithm,`Scheduler`A high-priority task is received`Reconciler`Tasks are interrupted and replaced by higher-priority tasks. But due to the`Scheduler`and`Reconciler`All work in memory and do not perform specific view operations. So even if an interruption occurs, the user will not see the view that is not fully updated.Copy the code
Asynchronous -- Reconciler and Renderer no longer work alternatelyCopy the code

When Scheduler sends a task to the Reconciler, it marks (add, delete, update) the virtual DOM that needs to change. The process (Scheduler+Reconciler) is done in memory and is handed over to the Renderer only after all components have reconciliated.

At this point, the same initial render and update logic becomes:

The Scheduler receives tasks and determines whether there are other tasks with a higher priority in the current queue ② - ① There are no tasks with a higher priority and distributes the current tasks to the Reconciler ② - ② There are tasks with a higher priority. After receiving Reconciler's tasks, the Reconciler performs a Diff algorithm to create a virtual DOM tree that compares the original nodes with the changed ones. Mark PLACED for the nodes to be added and UPDATE for the nodes to be updated. Finally, the marked virtual DOM tree is passed to the Renderer. (4) After receiving the final virtual DOM tree, the Renderer performs the corresponding update operation according to the markCopy the code

Among them, the process from ① to ③ will be interrupted at any time for the following two reasons:

The Scheduler receives a higher priority task. 2. The current frame does not have enough time leftCopy the code

But even if it is interrupted, it does not affect the user experience because, as mentioned above, Scheduler+Reconciler is done in memory, and the uncalculated virtual DOM is not rendered onto the page as long as it is not in the Renderer.

conclusion

This piece focuses on the Stack Reconciler in Replay 15, and how it was optimized in Replay 16. In the next installment, we will talk about the Fiber Reconciler, which becomes the default Reconciler in React16 and later editions.

Finally, let’s put my Github address, which has a Leetcode-Daily repository.

If you like, please click Star. Thank you very much.