This article is based on the React technology revealed by Casson and its accompanying video from the top down learn React source code

React Technology Debunked – Summary of ideas

What is React?

  1. React is a JavaScript library for building user interfaces. Simply put, it is a UI library, expressed as a function formula:fn(props)-> UI.
  2. React:
    • Declarative: code intuitive, easy to combine
    • Componentization: view splitting, module reuse, reduced coupling
    • Generality: Learn once, write anywhere, such as RN
  3. React design philosophy: Fast response

But a quick response can be affected by a number of factors, such as:

  • Insufficient CPU memory due to a large number of computations (CPU)
  • Network Request (IO)

How can these constraints be addressed? Act16 uses asynchronous interruptible updates to address these constraints.

React Architecture Evolution (compare versions 15 and 16)

  1. Act15 version architecture
  • For Reconciler coordinators, Diff finds out component changes because, based on recursion, the data is stored in a recursive call Stack called Stack Reconciler
    • Call the Render method of a function component or class component to convert JSX into a virtual DOM
    • Compare the virtual DOM to the last updated virtual DOM
    • Compare the changes to the virtual DOM in local updates
    • Notify the Renderer to render the changed virtual DOM onto the page
    • Disadvantages: Use recursive update, cannot interrupt, when the component level is very deep, the update time may exceed 16ms(1000ms/ 60Hz)
  • Renderer: Updates the changing components to the page
  1. React16 architecture
  • The Scheduler Scheduler: Dispatching tasks with priority, and high-priority tasks with priority into Reconciler
  • The Reconciler coordinator: Is responsible for identifying changing components
  • The Renderer Renderer: Is responsible for rendering the changing components onto the page
  1. Why did React16 rewrite the Stack Reconciler to Fiber Reconciler?

The architecture of React15 works in sequence for each component Reconciler and Renderer, but because the entire update process is synchronized, all updates change at the same time on the view, on this basis Instead of asynchronous interruptible updates, users will see that the complete UI is not updated, which is a BUG for users

In fiber, priorities are scheduled by the Scheduler, and Reconciler reconcilers reconcilers with Reconciler components, marking the Reconciler components with corresponding labels. After this process is complete, the marked virtual DOM is handed to the Renderer. Scheduler and Reconciler are in memory and do not update the PAGE DOM, which does not affect the page even if it is interrupted repeatedly, so React believes that the old architecture cannot implement asynchronous interruptible updates

Fiber

  1. Fiber was designed to:
    • Updates can be interrupted and can continue
    • Updates can have different priorities, and high-priority updates can interrupt low-priority updates
  2. What is the Fiber?
  • As an architecture: In contrast to React15’s Stack Reconciler, which keeps data in a recursive call Stack,React16’s Reconciler is based onFiber nodeThe implemented is calledfiber Reconciler
  • As static data structures: Each fiber node discard a React component, which stores the type of the component and the corresponding DOM information
  • As a dynamic unit of work: Each fiber node holds the changed state of the component in this update, the work to be performed (need to be removed/inserted /…)
  1. What is double cache? React16 using double caching?

The technique of building in memory and replacing it directly is called double caching

React uses dual caches to build and replace fiber trees and create and update DOM trees

In React, there are at most two trees at the same time. The current Fiber tree corresponding to the rendered content on the page is called the Current Fiber tree, and the workInProgress Fiber tree being built in memory is called the workInProgress Fiber tree. The two trees are connected by alternate property

The React fiberRoot current points to the workInProgress Fiber Fiber becomes a Current Fiber tree, which is how React uses dual caching