One, foreword

React V16: React V16: React V16 It’s been a while since the React V16 release, and a lot of people are already familiar with Fiber and the problems it solves. This article mainly explains what Fiber is and how it works. It does not go into the details of what problem fiber solves. As we all know, the concept of Fiber was introduced to solve the problem of react synchronous update performance. However, fiber is only a part of it.

2. Fiber concept

What is Fiber? Because English is the native language of foreign programmers, they are careful about naming the code. Fiber means a fiber, you know a process, a thread, a fiber is a smaller thing than a thread. Since JS is single-threaded, fiber is a nice name from this perspective.

So that’s fiber. What is fiber in the code? Fiber is a similar exampleTwo-way linked listThe data structure of. The diagram below:

ReactDom generates a fiber node for each DOM node based on JSX,(Note: Fiber nodes are not generated separately when textNode is the only child node), child points to the first child, sibling points to the next sibling, return points to the parent. This data structure is called fiber data structure. Of course, fiber stores other data, which is not covered here, so it will not be expanded.

Iii. Working principle of Fiber

Now that you know about Fiber’s data structure, how does Fiber work with react asynchronous interruptible updates? The React virtual DOM (pre-v16) does not support interruptible updates

/ / update before < ul > < li > 1 < / li > < li > 2 < / li > < li > 3 < / li > < / ul > / / update the < ul > < li > 2 < / li > < li > 3 < / li > < li > 4 < / li > < / ul >Copy the code

We update 123 to 234(update 1). During the update process, when 1->2, 2->3 is completed, it is interrupted. 3 does not become 4, so the result is 233, which causes a bug.

React V16 uses dual-cache technology, which stores two Fiber data structures during updates.

In the figure above, rootFiber is the React application, footFiberNode is the node where the application is attached, and the fiber that current points to is the fiber rendered in the page (i.e. the view that appears on the screen). We call it not current Fiber. Each fiber node of current Fiber has an AlterNode pointing to the same fiber node of another tree. We call this fiber workInProgress Fiber.

As we know, when react V16 was updated, the JSX and virtual DOM tree diff algorithms were used to calculate the final view that needed to be updated. The React V16 Diff algorithm calculates the JSX and workInProgress Fiber to get the final view, and then points the current pointer to the workInProgress Fiber to render the new view. The diff algorithm with workInProgress Fiber is performed in memory, and the existing view is unaffected even if interrupted.

Four, extension,

React uses the dual cache technology to implement interruptible updates. Why not use the original architecture (virtual DOM) to implement dual caching? Among the reasons, I think the following two points are the most critical: 1. Fiber is a typical way to exchange space for time to improve operation efficiency; 2. The emergence of Fiber is the key to realize function Component and Hook (State data persistence)