1. General process

The architecture is divided into these three modules

2. How to respond quickly

1. Computing capability – CPU

2. Request the interface to return the speed -IO

The solution

1. Browser 1000/60=16.6ms one frame this frame needs to execute JS script, style layout, style drawing. When js script exceeds 16.6ms, style layout and other browser response events will be slow, such as input character response is slow

We can use anti-shake and throttling to reduce the trigger frequency, but this is not the root cause. React introduced asynchronous updates, i.e. React and browser conventions. Allow a certain amount of time to execute JS, after which time the browser will execute the style layout and response event (input input), and the next frame will continue to execute JS (a bunch of calculations or DOM creation). This solution solves the problem of CPU execution js time asynchronously interrupts also can solve THE IO bottleneck

3. Architectural evolution

The old architecture

The reconciler is divided into two parts: Deciding which components need to be updated, the Diff’s official name is Reconcile

Renderer: Renderers from different environments render components to different environments, reactDOM renderers render components to browsers, and reactNative renderers render components to native components

The old architecture was synchronous update so 1->2, 2->4 even though it was 1, it became 2 and then rendered to the view and then 2->4 rendered to the view but it was synchronous update so what we saw was that it all changed together, so the old architecture couldn’t do asynchronous interrupt update because we added 1->2 and it broke after rendering, At this point, 2 is not 4 and that’s a bug from the user’s point of view, so rewrite the architecture

The new architecture

The new architecture adds the schedule scheduler to solve this problem. Each update will be assigned a priority, and the higher-priority tasks will go to the coordinator first

New architecture workflow

At this point, there is only one task scheduler when count changes to 2 and there is also a diff change within the coordinator instead of one task at a time. Only the scheduler can schedule tasks, and there is no prioritized task at the coordinator

4. New architecture of coordinator fiber

Algebraic effects are the concept of functional programming, in which users separate side effects from function calls (in this case the number of requested images) to keep functions pure. The most obvious example is the hooks: we only need to know how to operate on number

suspense

In suspense the ProfileDetails are completely synchronous (it is pulled out of suspense because of asynchronous logic side effects), so the logic is completely pulled out of suspense. In suspense it is possible to keep track of unfinished tasks (such as promises) internally. When the pending state says “Fallback” etc is finished, the children are displayed inside

For example,

const resource = fetchProfileData();

function ProfilePage() {
  return (
    <Suspense fallback={<h1>Loading profile...</h1>} ><ProfileDetails />
      <Suspense fallback={<h1>Loading posts...</h1>} ><ProfileTimeline />
      </Suspense>
    </Suspense>
  );
}

function ProfileDetails() {
  // Attempt to read user information, although the data may not have been loaded
  const user = resource.user.read();
  return <h1>{user.name}</h1>;
}

function ProfileTimeline() {
  // Try to read the blog message, although the data may not be loaded
  const posts = resource.posts.read();
  return (
    <ul>
      {posts.map(post => (
        <li key={post.id}>{post.text}</li>
      ))}
    </ul>
  );
}
Copy the code

The Fiber architecture does two things

1. Internal interrupt. External can catch the error and continue execution at that place

similar

function getPicNum(name) {
  const picNum = perform name;
  return picNum;
}

try {
  getTotalPicNum('kaSong'.'xiaoMing');
} handle (who) {
  switch (who) {
    case 'kaSong':
      resume with 230;
    case 'xiaoMing':
      resume with 122;
    default:
      resume with 0; }}Copy the code

2. High-priority tasks can interrupt low-priority tasks

5. Principle of Fiber architecture

The old coordinator is stack Reconciler recursive implementation

1. The new Reconciler Fiber reconciler Fiber is a framework with attributes such as Child and Index

2. Fiber is a virtual DOM with attributes like ref, Tag, type, etc

3. Fiber as a dynamic unit of work fiber saves the updating state and effect of components, such as effect

2. Double cache update page

Since there is only one fiber added, we delete the old fiber. In the process of creating a new fiber, if there is a blockage, there is no fiber in the middle, and the screen is blank. So we just have to replace the old fiber with two new fibers

Update the workingProgress tree to the current fiber tree. Update the Current Progress tree to the current Fiber tree

Each time an update is triggered, a workingProgress tree will be generated. The nodes in the Current Fiber tree will be called the current node, and the JSX and currentFiber components of the update process will be diff to create a new WorkingProgress.

So the difference between the first rendering and the update is that there is no currentFiber tree for comparison, the first rendering doesn’t have currentFiber