What is React Fiber

React Fiber is a data structure similar to a doubly linked list; ReactDom will generate a fiber node for each dom node based on jsx, with child pointing to the first child node, sibling pointing to the next sibling node, and return pointing to the parent. The data structure of the node is the fiber data structure.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is React Fiber

What is fiber? Because English is the native language of foreign programmers, they are very particular about naming in the code. Fiber means fiber. Everyone knows process and thread. Fiber is something thinner than thread. Because JS is single-threaded, from this perspective, fiber naming is very sophisticated.

The above is the concept of fiber. What is fiber in the code? In fact, fiber is a data structure similar to a doubly linked list. As shown below:

reactDom will generate a fiber node for each dom node based on jsx. (Note: When textNode is the only child node, fiber will not be generated separately. node), child points to the first child node, sibling points to the next sibling node, and return points to the parent node. Such a data structure is the fiber data structure, and of course other data is stored in the fiber.

How fiber works

Having understood the data structure of fiber, how does fiber play a role in react's asynchronous interruptible updates?

##  First of all, let’s take a look at why the original react virtual dom (version before v16) cannot support interruptible updates. First, we assume that the virtual dom cannot be interrupted (actually it is not interruptible), such as the following code

// 更新前
 <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
 </ul>
 // 更新一
 <ul>
    <li>2</li>
    <li>3</li>
    <li>4</li>
 </ul>

 We updated 123 to 234 (Update 1). During the update process, when 1->2, 2->3 was completed, it was interrupted, and 3 did not become 4, then the result was 233, which resulted bug.

The solution for react v16 is double caching technology, that is, when updating, react stores two fiber data structures, as shown below:

 

 In the picture above , rootFiber is the react application, footFiberNode is the node where the application is hung, and the fiber pointed by current is the fiber rendered in the page (that is, the view that appears on the screen). We call it current fiber. Each fiber node of current fiber is There is an alternode pointing to the same fiber node in another tree. We call this fiber workInProgress fiber.

We know that when the version before react v16 is updated, jsx and virtual dom tree will be used for diff algorithm, and the calculation result is the final view that needs to be updated. In react v16 diff algorithm, jsx and workInProgress fiber are calculated, and finally the final view is obtained, and then the current pointer is pointed to the workInProgress fiber to render the new view. The diff algorithm with workInProgress fiber is performed in memory and will not affect the existing view even if it is interrupted.

Recommended learning: "

react video tutorial"

The above is the detailed content of What is React Fiber. For more information, please follow other related articles on the PHP Chinese website!