JS is usually executed in a single-threaded environment. When encountering time-consuming code, the first thing we think of is to divide the task so that it can be interrupted, and at the same time give up execution rights when other tasks arrive. After execution, the remaining calculations are performed asynchronously starting from the previously interrupted part. So the key is to implement an asynchronous and interruptible solution. So how will we implement a solution that has task division, asynchronous execution, and can also give up execution rights. React provides corresponding solutions.
background
React originated as an internal project at Facebook to build the Instagram website and was open sourced in May 2013. The framework is mainly a JavaScript library for building user interfaces, which is unique in the front-end world of two-way data binding at the time. What's even more unique is that he introduced a partial refresh mechanism in page refresh. There are many advantages. In summary, the main features of react are as follows:
1. 1 Transformation
The framework believes that UI only transforms data into another form of data through mapping relationships. The same input must have the same output. This happens to be a pure function.
1.2 Abstraction
In actual scenarios, only one function is needed to implement complex UI. The important thing is that you need to abstract the UI into multiple functions to hide the internal details. Implementing complex user interfaces by calling one function within another is called abstraction.
1.3 Combination
In order to achieve reusability, each combination only creates a new container for them. You also need to "combine other abstract containers again." That is, combine two or more containers. Different abstractions are merged into one.
The core value of Reactwill always be done around the goalUpdateThis matter will be updated Combining it with the ultimate user experience is what the React team has been working hard on.
Slower ==>Upgrade
As applications become more and more complex, in the React15 architecture, if the dom diff time exceeds 16.6ms, the page may freeze. So what factors cause react to become slow and need to be refactored.
In versions prior to React15, the coordination process was synchronous, also called stack reconciler, and because the execution of js was single-threaded, this resulted in the inability to respond in time to some high-priority tasks when updating more time-consuming tasks, such as Users may experience lag when typing on a page while dealing with time-consuming tasks. The cause of page freezes is most likely caused by excessive CPU usage. For example, when rendering a React component, making a network request, or executing a function, the CPU will be occupied. If the CPU usage is too high, it will cause a blocking feeling. How to solve this problem?
In our daily development, JS is usually executed in a single-threaded environment. When encountering time-consuming code, the first thing we think of is to divide the task so that it can be interrupted, and at the same time, when other tasks arrive, Give up execution rights, and when other tasks are executed, the remaining calculations will be executed asynchronously from the previously interrupted part. So the key is to implement an asynchronous and interruptible solution.
So how will we implement a method with task division, asynchronous execution, and also What about the solution for executing rights. React provides corresponding solutions.
2.1 Task division
How to execute divided tasks in a single thread, especially in react15, the update process is synchronous, and we cannot divide it arbitrarily, so react provides a set of data structures that allow it to map the real DOM and also serve as a split unit. This leads to our Fiber.
Fiber
Fiber is the smallest unit of work in React. In React, everything is a component. On an HTML page, multiple DOM elements integrated together can be called a component. HTML tags can be components (HostComponent), and ordinary text nodes can also be components (HostText). Each component corresponds to a fiber node. Many fiber nodes are nested and associated with each other to form fiber Tree (why use the linked list structure: because the linked list structure is to exchange space for time, and the performance is very good for insertion and deletion operations), just like the relationship between the Fiber tree and the DOM expressed below:
Fiber树 DOM树
div#root div#root
| |
<App/> div
| / \
div p a
/ ↖
/ ↖
p ----> <Child/>
|
a
A DOM node must be connected to a fiber node, but a fiber node has a matching DOM node. The structure of fiber as a working unit is as follows:
export type Fiber = {
// 识别 fiber 类型的标签。
tag: TypeOfWork,
// child 的唯一标识符。
key: null | string,
// 元素的值。类型，用于在协调 child 的过程中保存身份。
elementType: any,
// 与该 fiber 相关的已解决的 function / class。
type: any,
// 与该 fiber 相关的当前状态。
stateNode: any,
// fiber 剩余的字段
// 处理完这个问题后要返回的 fiber。
// 这实际上就是 parent。
// 它在概念上与堆栈帧的返回地址相同。
return: Fiber | null,
// 单链表树结构。
child: Fiber | null,
sibling: Fiber | null,
index: number,
// 最后一次用到连接该节点的引用。
ref:
| null