preface

Prior to the release of The Update, the industry thought that the update was just called Fiber, illustrating the importance of Fiber. Fiber means fiber in English, which is a unit smaller than a thread. Facebook named it Fiber to describe a rendering mechanism that is smaller than threads. To describe Fiber architecture as I understand it in one sentence:

The new Fiber architecture changes the react synchronous component rendering mechanism so that components can now be rendered asynchronously and can be interrupted to perform higher-priority tasks, providing a better user experience.

To solve what kind of problem

Each update is not a trivial change, but a solution. Fiber was introduced to solve the problem of how users interact with web applications within the web:

  • In versions prior to Act16, component rendering was a synchronous action. If a component had many layers of sub-components, rendering took a long time and could not be interrupted during the component rendering process, resulting in the user’s inability to interact with the web page during this time.
  • All tasks are carried out in order of precedence and have no priority. As a result, tasks with higher priority cannot be carried out first.

Problems with React15

A case we use the following to describe react15 the problem: in many a page element, and the need to frequently refresh, react15 will incurred a loss of frame, the following graph: demo address: claudiopro. Making. IO/react – fiber…

The reasons for this problem are as follows:

The root cause: a large number of synchronous computations block the browser’s UI rendering. By default, JAVASCRIPT operations, page layout, and page drawing are all run in the main thread of the browser, and they are mutually exclusive. If JS operations continue to occupy the main thread, the page will not be updated in a timely manner. When we call setState to update the page, React iterates through all the nodes of the application, calculates the differences, and then updates the UI without interruption. If the page has a lot of elements, the whole process can take longer than 16 milliseconds, making it easy to drop frames. To solve this problem, the React team optimized the web page operation mechanism from the framework level, and achieved good results. The effect after the change is shown below:

React react

The basic idea to solve the problem that the main thread is occupied by JS operation for a long time is to cut the operation into several steps and complete them in batches. This means that after a portion of the task has been completed, control is handed back to the browser, giving it time to render the page. Wait for the browser to finish, then continue with the unfinished task.

New answer sheet for React16

The inner workings of the React framework can be divided into three layers:

  • Virtual DOM layer: What does a description page look like
  • The Reconciler layer: Is responsible for calling the component declaration cycle method, performing Diff operations, and more.
  • Renderer layer: Depending on the platform, render the corresponding page, the common ones are ReactDOM and ReactNative.

The biggest changes are to the Reconciler layer, and to distinguish it from the previous ones, we have the following agreements:

  • Stack Reconciler (React15 Reconciler)
  • Fiber Reconciler (React16’s Reconciler)

Stack Reconciler’s running process

The process of working with the Stack Reconciler cannot be interrupted, and it must be a road to the black:

The workings of Fiber Reconciler

Every time the Fiber Reconciler is executed, control is handed back to the browser, which can be executed in segments:

How is Fiber Reconciler realized

Task priority

To achieve this, you need a schedular to assign tasks based on their priority. High-priority tasks (such as keyboard input) can interrupt low-priority tasks to take effect more quickly. There are six priorities for tasks:

  • Synchronous: As with the previous Stack Reconciler operation, it is executed synchronously
  • Task: Executed before the next tick
  • Animation: The next frame executes immediately
  • High: Immediate execution in the near future
  • Low: It doesn’t matter if the execution is slightly delayed
  • Offscreen: execute at next render or scroll time

The implementation of the Fiber Reconciler

The react life cycle is divided into two stages with Render as the boundary:

  • Render Phase: The life cycle of this phase can be interrupted by jumping out of the current process at regular intervals to see if there are higher priority tasks waiting to be executed
  • Commit Phase: The life cycle of this phase cannot be interrupted. React updates all changes to the DOM at once

Take a look at render Phase’s mechanics

What the Render Phase does is very important, so we need to understand the render Phase mechanics.

  • Not interrupted: If not interrupted, the Render function will be directly executed in the Render phase to build the true virtualDomTree
  • Interrupted: If a component is interrupted during the Render phase, React will abandon what the current component is doing halfway and move on to higher-priority tasks. When the high-priority task is finished, React uses callback to go back to the previously half-rendered component and start rendering from scratch. (It might seem unreasonable to discard the rendered life cycle and increase the render time, but react actually does this.)

The problem with this approach

The Render Phase lifecycle function may be executed multiple times due to the disruptive nature of the Render Phase phase. Therefore, we need to ensure that the life cycle function of the Render phase phase is a pure function with no side effects and that the output is the same every time it is executed.

Write in the last

Facebook was cautious and did not enable this feature in the first version of version 16 in case the change was too big for other developers to work properly. In later versions of Act16 there will be an option to turn fiber on, which is turned off by default.

In addition, facebook’s addition of the Fiber structure in Act16 is not intended to reduce component rendering times, nor will it actually decrease, but increase them. The solution is to enable some higher-priority tasks to be carried out first, improve the user experience, from the user’s point of view will not feel stuck.

Finally, there are some issues that are not well explained, such as hunger, where low-priority tasks will always be impossible to perform if high-priority tasks remain. We expect react to come up with a good solution.