What is JSX
It is an extension of javascript syntax, and React uses it to describe what the user interface looks like. Although it looks very much like HTML, it is indeed javascript. Before the React code is executed, Babel will compile JSX into the React API.
Virtual DOM
In React, each DOM object has a corresponding Virtual DOM object, which is the javascript object representation of the DOM object. In fact, the javascript object is used to describe the DOM object information, such as the type of the DOM object and what is on its body Attribute, which child elements it has.
The Virtual DOM object can be understood as a copy of the DOM object, but it cannot be displayed directly on the screen.
How to improve the efficiency of Virtual DOM
Accurately find out the changed DOM object and update the changed part of the value.
After React creates a DOM object for the first time, it will create a corresponding Virtual DOM object for each DOM object. Before the DOM object is updated, React will update all Virtual DOM objects, and then React will update the Virtual DOM and Compare the Virtual DOM before the update to find the changed part. React will update the changed part to the real DOM object, and React will only update the part that needs to be updated.
The update and comparison of Virtual DOM objects only happen in memory, and nothing is rendered in the view, so the performance loss cost of this part is negligible.
Create Virtual DOM object
Before the React code is executed, JSX will be converted by Babel to the React.createElement method call. When the createElement method is called, it will break into the type of the element, the attributes of the element, and the child elements of the element. The return value of the createElement method is the constructed Virtual DOM object .
Component rendering distinguishes function components and class components
Before rendering the component, the first thing to be clear is that the value of the Virtual DOM type of the component is a function, and both function components and class components are like this.
// 原始组件
const Heart = () => <span>♥<span>
<Heart />
// 组件的 Virtual DOM
{
type: f function() {
};
props: {
}
children: []
}
Virtual DOM comparison
Deep recursive traversal comparison to update node information
Delete node
Deleting a node occurs after the node is updated and occurs on all child nodes under the same parent node.
After the node update is completed, if the number of old node objects is more than the number of virtualDOM nodes of the new node, it means that a node needs to be deleted.
setState method to implement component update
Determine whether the Virtual DOM to be updated is a component in the diff method
If it is a component, then determine whether the component to be updated and the component before the update are the same component. If it is not a component, there is no need to perform component update operations, and directly call the mountElement method to add the returned Virtual DOM to the page
If it is the same component, perform the operation of updating the component, which is actually to pass the latest props to the component, call the render method of the component to obtain the latest Virtual DOM object returned by the component, and then pass the Virtual DOM object to the diff method. Let the diff method find the difference and update the difference to the real DOM object.
In the process of updating components, different life cycle functions are called at different stages.
In the diff method, determine whether the Virtual DOM to be updated is a component. If it is a component, it is divided into multiple situations, and the diffComponent method is added for processing
Implement ref attribute to obtain element DOM object to obtain component instance object
Add the ref attribute to the node to get the DOM object of this node. For example, in the DemoRef class, add the ref attribute to the input element, the purpose is to get the input DOM element object, and get the content of the user in the text box when the button is clicked
The realization idea is to judge whether the Virtual DOM object contains the ref attribute when the node is created, if so, call the method stored in the ref attribute and pass the created DOM object as a parameter to the ref method, so that when the component node is rendered You can get the element object and store the element object as a component attribute.
The ref attribute can be added to the body of the class component, the purpose is to obtain the instance object of the component.
Use the key attribute for node comparison
In React, when rendering list data, the key attribute is usually added to the rendered list element. The key attribute is the unique identifier of the data, helping React to identify which data has been modified or deleted, so as to achieve the purpose of DOM minimization.
The key attribute does not need to be globally unique, but must be unique among sibling nodes under the same parent node.
In other words, child nodes of the same type under the same parent node need to use the key attribute.
Node comparison
The realization idea is that when two elements are compared, if the types are the same, the child elements of the old DOM object are looped to check whether there is a key attribute on them, and if there is, the DOM object of this child element is stored in a javascript object , And then loop the child elements of the Virtual DOM object to be rendered, get the key attribute of this child element during the cycle, and then use the key attribute to find the DOM object in the Javascript object. If it can be found, it means that the element already exists , There is no need to re-render. If the element cannot be found through the key attribute, it means that the element is new and needs to be rendered.
Delete node
In the process of comparing nodes, if the number of nodes is more than the number of new nodes to be rendered, it means that a node has been deleted. Continue to determine whether there are elements in the keyedElements object. If not, use the index method to delete, if there is, use the key Delete the attribute comparison method.
The realization idea is to loop the node. In the process of looping the old node, the key attribute corresponding to the old node is obtained, and then the old node is searched according to the new node where the key attribute is located. If the old node is found, the node has not been deleted, if not found, it means this If the node is deleted, call the method of uninstalling the node to uninstall the node.
Deleting a node does not mean that it is enough to delete the node directly. The following situations need to be considered:
If the node to be deleted is a text node, you can delete
it directly. If the node to be deleted is composed of components, you need to call the function of the component uninstall life cycle.
If the node to be deleted contains nodes generated by other components, you need to call the uninstall life of other components. Periodic function
If the node to be deleted has a ref attribute, you also need to delete the DOM node object passed to the component through the ref attribute.
If the deleted node has an event, you need to delete the event handler corresponding to the event
requestIdleCallback
Core API function introduction
Use the free time of the browser to execute tasks. If there is a higher priority task to be executed, the currently executing task can be terminated and the higher-level task will be executed first.
Browser free time
The page is drawn frame by frame. When the number of frames drawn per second reaches 60, the page is smooth. When it is less than this value, the user will feel a freeze at
60 frames per second. When each frame is divided into time 1000/60 is approximately equal to 16ms. If the execution time of each frame is less than 16ms, it means that the browser has free time.
If the browser does not complete within the remaining time, the task execution will be stopped and the main task will be executed first, which means that requestIdleCallback is always Use the free time of the browser to perform tasks