This is the 17th day of my participation in the August Challenge

React15 architecture

The Act15 architecture can be divided into two layers:

  • Reconciler — the components that identify change
  • Renderer — Responsible for rendering the changing components onto the page

Reconciler:

React allows updates to be triggered using apis such as this.setState, this.forceUpdate, and reactdom. render. Every time there is an update, the Reconciler does the following

  • Calling a function component, or a class componentrenderMethod to convert the returned JSX into a virtual DOM
  • Compare the virtual DOM to the virtual DOM from the last update
  • Find out the virtual DOM changes in this update by comparison
  • Notify the Renderer to render the changed virtual DOM onto the page

You can see the React official interpretation of the Reconciler here

Renderer

React is cross-platform, so different platforms have different renderers. The Renderer we’re most familiar with on the front end is the ReactDOM (open New Window), which is responsible for rendering in the browser environment. In addition, there are:

  • ReactNative (Opens New Window) renderer, which renders native App components
  • The Ttest (open New Window) renderer renders pure Js objects for testing
  • ReactArt (Opens New Window) : Render to Canvas, SVG or VML (IE8)

Each time an update occurs, the Renderer is notified of the Reconciler and renders the changed components in the current host environment.

The disadvantage of React15

In the Reconciler, the components of mount call mountComponent (Labour of New Window), and the components of Update call updateComponent (Labour of New Window). Both methods update the child components recursively.

Disadvantages of recursive updates

The update, once started, cannot be interrupted because it is executed recursively. When the hierarchy is deep and the recursive update time exceeds 16ms, the user interaction freezes. Solution -> Replace synchronous updates with interruptible asynchronous updates. (react16)

React16 architecture

The Act16 architecture can be divided into three layers:

  • Scheduler — Schedulers prioritize tasks, and high-priority tasks get priority into Reconciler
  • Reconciler — the components that identify change
  • Renderer — Responsible for rendering the changing components onto the page

As you can see, Scheduler is added to React16 compared to React15.

Scheduler

Task interrupts based on whether the browser has time left -> need a mechanism to notify us when the browser has time left. Some browsers already implement the API, which is called requestIdleCallback (Opens New Window). React was abandoned due to the following factors:

  • Browser compatibility
  • The trigger frequency is unstable, affected by many factors. For example, when our browser switches to TAB, the previous TAB is registeredrequestIdleCallbackThe frequency of the trigger will become very low

Based on the above reasons, the React to achieve the function more complete requestIdleCallbackpolyfill, this is the Scheduler. In addition to the ability to trigger callbacks when idle, Scheduler provides a variety of scheduling priorities for tasks to set.

Scheduler (Open New Window) is a library independent of React.

Reconciler:

In Reflex 15, the Reconciler is processed recursively in the virtual DOM. The React16 Reconciler update has moved from a recursive to a cyclical process that can be interrupted. Each time the loop calls shouldYield to see if there is any time left.

Reconciler and Renderer no longer work alternately. When Scheduler hands Reconciler tasks, it marks the changing virtual DOM with tags that represent add, delete, and update, and the entire Scheduler’s work with Reconciler takes place in memory. Only when all components are finished with the Reconciler will the Reconciler be uniformly handed over to the Renderer.

function workLoopConcurrent() { // Perform work until Scheduler asks us to yield while (workInProgress ! == null && ! shouldYield()) { workInProgress = performUnitOfWork(workInProgress); }}Copy the code

Renderer

The Renderer synchronously performs DOM operations based on the Reconciler’s markings for the virtual DOM

conclusion

React 16 fixes some of the drawbacks of React15 by replacing synchronous updates with interruptible asynchronous updates, making fast responses possible