Shulou(Shulou.com)05/31 Report--

This article mainly introduces the concept of React Fiber is what the relevant knowledge, detailed and easy to understand, simple and fast operation, has a certain reference value, I believe that everyone will have a harvest after reading this article React Fiber concept, let's take a look at it.

React Fiber is a data structure similar to a doubly linked list;ReactDom generates a fiber node for each dom node according to jsx, child points to the first child node, sibling points to the next sibling node, and return points to the parent node.

This tutorial will operate on Windows 10, React17.0.1, Dell G3 PC.

What is React Fiber?

What is fiber? Because English is the native language of foreign programmers, they have a good name for the code. Fiber means fiber, everyone knows process, thread, fiber is something finer than thread. Because JS is single-threaded, so from this point of view, fiber naming is very elegant.

The above is the fiber concept, what is fiber in the code? In fact, fiber is a data structure similar to a doubly linked list. As shown 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 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 there are other data stored in fiber.

Fiber works

  Now that you understand fiber's data structure, how does fiber work in reacting asynchronous interruptible updates?

  First of all, let's take a look at the original react virtual dom(version before v16) why it does not support interruptible updates. First of all, let's assume that virtual is not interruptible (actual non-interruptible), such as the following code.

//before update 1 2 3 //Update 1 2 3 4

  We update 123 to 234(update one), and 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 creates a bug.

  React v16 solution is double cache technology, that is, when updating, react stores two fiber data structures, as shown below:

  In the above figure, rootFiber is a react application, footFiberNode is the node where the application hangs, the fiber pointed to by current is the fiber rendered in the page (i.e., the view appearing on the screen), we call it 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.

  We know that when the version before react v16 is updated, jsx and the virtual dom tree are diff algorithms, and the result is the view that needs to be updated. In react v16 diff, jsx and workInProgress fiber are computed to arrive at the final view, and then the current pointer is pointed to workInProgress fiber to render the new view. The diff algorithm with workInProgress fiber is performed in memory and does not affect existing views even if interrupted.

About "What is the concept of React Fiber" The content of this article is introduced here, thank you for reading! I believe everyone has a certain understanding of the knowledge of "what is the concept of React Fiber". If you still want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.