People who use React should know React Fiber, because it’s coming out soon.
Facebook has been toying with React Fiber for over two years now, and at the React Conf 2017 conference, Facebook confirmed that React Fiber will be riding the wave of the next big release of React, v16.
Is Fiber Ready Yet? The React Fiber unit test pass rate is 93.6%. Facebook has already put the React Fiber into action on their site, so the React Fiber is a trend. It’s time to learn about React Fiber.
What is React Fiber? The official one-sentence explanation is that “React Fiber is a re-implementation of the core algorithm.” This seems too fanciful to say, so I’ll elaborate.
First of all, don’t get too nervous and assume that React Fiber’s arrival is a revolution. In fact, for those of us who just use React as a tool, there will probably be no noticeable feature changes. When React V16 was released, we changed the React version number in package.json, re-installed NPM, and we were done, and we felt that the page was performing better, that’s all.
Of course, the React Fiber algorithm changes will still result in some functional logic changes, which will be explained later.
Why is Facebook doing React Fiber? Let’s start by understanding the limitations of React (that is, until the latest V15 release).
Limitations of the synchronous update process
With existing React, the update process is synchronous, which can cause performance issues.
When React decides to load or update the component tree, it does a lot of things, such as calling the lifecycle functions of each component, calculating and comparing the Virtual DOM, and finally updating the DOM tree. The whole process happens synchronously. Run to the end, never stop halfway.
On the face of it, this makes sense because there’s no I/O, it’s all CPU, so there’s no asynchrony, it’s really just a sprint, but when the component tree gets big, it’s a problem.
If it takes a millisecond to update one component, it takes 200 milliseconds if there are 200 components to update, and during that time the main thread of the browser is too busy doing nothing else. Imagine that in 200 milliseconds, the user typed something into an input element and didn’t get a response by hitting the keyboard, because rendering the result of the input key was also the job of the browser’s main thread. However, the browser’s main thread was occupied by React, and the result was that the user didn’t get a response when he hit the key. By the time the React update process was complete, click click buttons were suddenly appearing in the input element.
This is called interface lag, and it’s a bad user experience.
In existing React versions, this problem occurs when the component tree is very large, because the update process synchronizes layer upon layer of components and does not stop until all components have been updated. The function call stack looks like this, which is called very deeply and does not return for a long time.
React Fiber
The antidote to long synchronization in JavaScript is simple: sharding.
A long task is divided into many small pieces, each of which has a short running time. Although the total time is still very long, other tasks are given a chance to execute after each small piece is executed, so that the only thread is not monopolized and other tasks still have a chance to run.
The React Fiber fragmented the update process, as shown in the figure below. After each update process, control is handed back to the React task coordination module to see if there are any other urgent tasks to be done. If there are no urgent tasks to be done, do the urgent tasks.
The data structure that maintains each shard is called Fiber.
After sharding, the call stack of the update process is shown in the figure below. Each trough in the middle represents the execution process of a sharding, and each peak is the time when the control is handed back after the execution of a sharding.
The truth is simple, but React is not easy to implement, otherwise why did it take more than two years!
Those interested in the principles of specific data structures should check out Lin Clark’s Talk at React Conf 2017 (To Get over the Wall), from which the introductory images are taken.
Why is it called Fiber?
In computer science, the concept of “Process” and “Thread” is also known as “Fiber”, which refers to the parallel processing mechanism with finer control than Thread.
The React Fiber and React Fiber are not the same concept. However, I believe the React team named this feature Fiber, which also means a tighter processing mechanism and is much finer than Thread.
As an aside, many years ago I was in a lecture with a senior who was talking about Fiber, and I asked him, “How do I get my program to manipulate Fiber?” Does your application really need Fiber? If the current approach were sufficient, there would be no need to know what Fiber is.
Ha-ha, at that time, I did not understand what the elder said, but later more and more I think the elder said is reasonable, if there is no need to use something, then it is not worth using, do not use it just because it is cool, or it is likely to suffer.
Anyway, I’d like to point out that for most React users, we don’t have to learn how to use React Fiber unless the implementation really affects how we use React Fiber, right?
However, the React Fiber implementation changes have really made some adjustments to the way we code.
React Fiber affects existing code
Ideally, React Fiber should not affect existing code at all, but unfortunately that’s not the case. It’s important to know a little bit about how the buns are made. If you don’t like sweet things, don’t eat sugar things, right?
In the React in the Fiber, the process of an update will be done into shards, so it is entirely possible that an update task is not yet complete, will be another update process of higher priority interrupt, at that time, the high priority update task will be dealt with in priority, and low priority tasks do update will void, and then wait for the opportunity to start again.
As an update process may be interrupted, the React Fiber update process is divided into two phases: Reconciliation Phase 1 and Commit Phase 2.
In the first Phase of Reconciliation, React Fiber will figure out which DOM needs to be updated. This Phase can be interrupted. But when it comes to the second Commit Phase, you can update the DOM without interrupting.
React Fiber does most of the work in these two phases, and what’s relevant to us is the life cycle function.
Bounded by the Render function, the first phase may call the following lifecycle functions, “may be called” because different lifecycle functions are called differently.
- componentWillMount
- componentWillReceiveProps
- shouldComponentUpdate
- componentWillUpdate
- componentDidMount
- componentDidUpdate
- componentWillUnmount
For example, A low-priority task A is executing, has called some component’s componentWillUpdate function, and then finds itself running out of time fragments, pops up to see if there is an urgent task, and, alas, there is an urgent task B, Then React Fiber will execute the urgent task B. Although task A is half finished, it has no choice but to give up completely. After task B is completed, task A will start over again. The componentWillUpdate function is called again.
In React, each lifecycle function is called absolutely once during a load or update; In React Fiber, this is no longer the case, as life cycle functions in the first phase may be called multiple times during a single load and update!
After using React Fiber, be sure to check the lifecycle functions associated with the first phase to see if the logic assumes only one call during an update, and if so, change it.
Let’s take a look at each of these functions that might be called repeatedly.
ComponentWillReceiveProps, even if the component is not updated, as long as the parent component updates can also cause this function is called, so call a few times more nothing, through!
ShouldComponentUpdate, this function is used to return a true or false, should not have any side effects, call a few times also just as well, through!
Render, should be pure function, more than a few times just as well, through!
The only functions left are componentWillMount and componentWillUpdate, which have side effects, so when using React Fiber, it’s important to focus on the implementation of these two functions.
How to try React Fiber?
Although React Fiber isn’t officially available yet, you can try React Fiber now and install React and React – DOM this way
yarn add react@next react-dom@next
Copy the codeI tried to replace React Fiber with React Fiber in the existing project, and the code did not change at all, indicating that life cycle functions in my application should not be called only once.
I’m sure there will be more detailed documentation when React Fiber is released, and we’ll cover it in more detail then.
Did this article help you? Welcome to join the front End learning Group wechat group:
