React has become one of the mainstream front-end frameworks. Its success is due to its design philosophy:

We believe React is the preferred way to build large, responsive Web applications in JavaScript. It does well on Facebook and Instagram.

React was upgraded from v15 to V16 to refactor the entire architecture. Why? Compare v15 and V16 to see how React takes things one step further.

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:

The Reconciler’s official interpretation

During development, we can trigger view updates in several ways:

  1. Initialization:render()
  2. Status Update:setState()
  3. Forced update:forceUpdate()

In React 15 and earlier solutions, the Reconciler uses a Stack Reconciler, and when React triggers an update, the Reconciler in turn does the following:

  • Call the Render method of the function component, class component, and convert the returned JSX to the 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

Renderer

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

Because React is cross-platform, there are different renderers for different platforms:

  • ReactDOM: Renders the React component as a DOM in the Web environment, often used in browser development
  • ReactNative: Renders the React component as a Native view, which is used in Native development
  • ReactTest: Is responsible for rendering the React component as a JSON tree, often used for Jest’s snapshot testing feature
  • ReactArt: 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 development environment.

The disadvantage of React15

Example: Initialize state.count = 1. Each time you click the button state.count++, the values of the three elements in the list are 1, 2, 3 times state.count.

As can be seen from the picture above, the Reconciler and Renderer work alternately, with the second Li entering the Reconciler after the first Li has changed on the page. If the second LI executes for a long time, the user will be stuck on 223’s page, which is different from the expected result.

When a component is initialized or updated, the child components are updated recursively. Because the update is performed recursively, once it starts, it cannot be interrupted halfway through. When the component hierarchy is deep and the recursive update time exceeds 16.6ms (mainstream browsers refresh every 16.6ms), the user interface freezes and the user experience is poor.

React16: React15: React16