What is the fiber of react?

#What is React Fiber?                                                                                                                                                                                                                                        (Recommended study: phpstorm)

The official explanation is "React Fiber is a re-implementation of the core algorithm." It seems too vague to say this, so I still have to elaborate on it.

First of all, don’t be too nervous. Don’t think that the arrival of React Fiber is a big revolution. In fact, for us developers who only use React as a tool, we may not feel any functional changes.

When React v16 is released, we modify the react version number in package.json and re-npm install. Everything is done. Then we feel that the performance of the web page is higher, that's all.

React Fiber's method

The method to solve the problem of too long synchronization operation time in JavaScript is actually very simple - sharding.

Divide a long task into many small pieces. The running time of each small piece is very short. Although the total time is still very long, after each small piece is executed, other tasks are given a chance to execute. In this way, the only thread will not be monopolized, and other tasks will still have a chance to run.

React Fiber fragments the update process. The execution process is as shown in the figure below. After each update process is executed, control is returned to the module responsible for task coordination in React to see if there is any There are other urgent tasks to do. If there are no urgent tasks, continue to update. If there are urgent tasks, then do the urgent tasks.

The data structure that maintains each shard is Fiber.

With sharding, the call stack of the update process is as shown in the figure below. Each trough in the middle represents the execution process of a certain shard, and each crest is the time when a shard execution ends and returns control. .

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