preface

• Fiber is the focus of which is to be fixed by the Hooks of Fiber. • Fiber is the focus of which is to be fixed by the Hooks of Fiber. If you don’t know, check out my home page. Fiber architecture React has been written for several years, and it is definitely too much to cover in one article. I decided to introduce it in four stages.

  • Motivation (or intention)
  • Initialize the
  • render
  • update

I read most of the articles on the Internet and wrote some simple introductions. I followed suit and went to the interview. I was rejected. For example, if you can answer some questions well, it shows that your knowledge of Fiber is good.

  1. It is said thatFiberThere are priorities, there are mechanisms to interrupt tasks, butJavaScriptIt’s single-threaded, so how do I interrupt it during computation?
  2. Data structure Why do you choose linked lists as data structures? Anything else? Like, arrays?
  3. Why sometimesrenderHow many times will it be executed?
  4. FiberIs the architecture necessarily asynchronous?
  5. FiberWhat’s the difference between a tree and a virtual DOM tree?

These are my interview questions… It was so deep that online articles barely covered it, so I decided to learn it myself, then share and document my learning process. If there are any mistakes, please discuss them together. Any questions can be added to my V: “DerrickTel” and discussed with me.

Please write down the remarks. Thank you.

Pre-knowledge

Processes and threads

Multithreading can process tasks in parallel, but threads cannot exist alone. They are started and managed by processes. What is a process?

A process is a running instance of a program. When a program is started, the operating system creates a block of memory for the program, which is used to store code, running data and a main thread to perform tasks. We call such a running environment a process.

Not the core, so I’ll give you a simple example to help you understand:

Processes are locomotives and threads are carriages of trains. Without a locomotive, the carriages could not run by themselves. A single locomotive can pull more than one car.

Single-threaded JavaScript and multi-threaded browsers

The first thing you’ll hear about JavaScript is that it’s single-threaded, and even more so why it’s single-threaded.

If the renderer thread and the JavaScript thread are working at the same time, the rendering result is very unpredictable: for example, the renderer thread can just draw a picture, and a piece of JavaScript will change it completely. This dictates that the JavaScript thread and the render thread must be mutually exclusive: the two threads cannot be interspersed and must be serial. While one thread is executing, the other thread can only suspend and wait.

So JavaScript is single threaded. So why are browsers multithreaded? There were several problems with the early single-threaded browsers:

  1. unstable
    1. A Web video or a Web game, for example, might require a powerful plug-in to help solve the problem. But plugins are bug-prone, and when one BUG crashes, the entire browser crashes
  2. Not smooth
    1. A single thread, if occupied with a large number of tasks, or even an endless loop, can bring the browser to a standstill
  3. unsafe
    1. If a single threaded plug runs as a virus or malicious program, your computer is at great risk

So browsers need multiple threads to deal with these legacy issues, and to ensure both speed and security. A web thread, for example, can sort out the data and wait for JavaScript to pick it up, just like doing laundry, I leave it at the laundry and I pick it up after dinner. I don’t have to do it by hand. But it also brings several problems

  1. More system resource usage.
  2. More complex browser architectures. (Not the point of this article

Single-threaded JavaScript has its own running mechanism called an event loop. You can read the article in my main course.

The React of card,

In Act15 and earlier versions. It’s all about comparing the two trees, finding where you need to update them, and finally updating them to the actual DOM tree. This algorithm is optimized by comparing two trees in the data structure. Also, the Diff time complexity of O(N3) has been optimized to O(n), which is unprecedented before. We call it a Stack Reconciler. And for a long time it was pretty good.

However, with the passage of time and the increasing complexity of the business, the React Stack Reconciler, which was once celebrated with great relish, has gradually become tired in terms of experience.

Why can you appear weak feeling?

Because in essence, the stack harmonic Diff algorithm is actually a depth-first tree traversal process. Depth-first tree traversal is always related to recursion.

Recursion is just going through the loop wirelessly, unless it hits its return condition. The most deadly part of this problem is the inability to stop. Add large enough, there will be a “page stuck”.

The emergence of the FIber

First, the translation of Fiber is: “Fiber”.

Wikipedia: “Fiber (English: fiber) is a substance consisting of continuous or discontinuous filaments.”

In simple terms, very thin things, which means fiber level control over the entire rendering process.

How does Fiber solve the problem

Fiber is a rewrite of the React scheduling algorithm. It is also a data structure created by React, which stores a virtual DOM node, the status that needs to be updated, and the side effects.

We know, what is the user most afraid of when using? No response, that is, “page stuck”. When we play a game, we think it’s stuck because it’s less than 60 frames per second, so we think it’s stuck, and so do browser pages. React only takes a second to get 60 frames flowing and users don’t feel “stuck”.

So Fiber’s job must be to get at least 60 frames per second before doing anything else.

Fiber architecture core: “Interruptible” “Recoverable” “Priority”

Fiber does all this for the user’s silky experience.

Imagine interrupting the now tedious calculation by prioritizing rendering pages first or something. Then resume the tedious calculation. Do you basically have a vague concept in your mind?

Further, React actually slices many tasks, and each of these tiny pieces can be called “Fiber”. Upon completion of a “Fiber”, the highest priority task in the queue is checked. If there is a higher priority than the current one, save the data and state on the “Fiber” node first, then proceed to the “higher priority task”. Then check again. If not, resume the task.

In the Render phase, a large update task is broken down into work units with different priorities. React interrupts and recovers work units based on their priorities. Since the render phase is actually “invisible” to the user, even if it is interrupted and restarted, it is zero perception to the user. However, the restart of the unit of work (that is, the task) will be accompanied by repeated execution of part of the lifecycle:

  • componentWillMount

  • componentWillUpdate

  • shouldComponentUpdate

  • componentWillReceiveProps

ShouldComponentUpdate is a function that returns true or false to help determine the need for an update.

And the three life cycles at the beginning of “componentWill” are abused by developers in various postures all year long, which is the “heavy disaster area” of side effects.

thinking

Are there any answers to the previous questions? Have you got any? Welcome to discuss

  1. It is said thatFiberThere are priorities, there are mechanisms to interrupt tasks, butJavaScriptIt’s single-threaded, so how do I interrupt it during computation?
  2. Data structure Why do you choose linked lists as data structures? Anything else? Like, arrays?
  3. Why sometimesrenderHow many times will it be executed?
  4. FiberIs the architecture necessarily asynchronous?
  5. FiberWhat’s the difference between a tree and a virtual DOM tree?

The index

zh-hans.reactjs.org/docs