• What is thevirtualDom
  • What is thediffalgorithm
  • keyThe role of

What is the JSX

Let’s start with a piece of JSX code

let add = (
    <div id = '1'>
        <p>abc</p>
    </div>
)
Copy the code

This will eventually compile to:

var app = React.createElement('div', {id: 'a'}, React.createElement("p".null."abc"));
Copy the code

JSX code will be parsed by babel-loader to react.createElement (…). Nested objects.

React.createElement(…) Create a virtual DOM structure.

Reactdom.render renders the generated virtual DOM to the specified container, which uses batch processing, transaction mechanism and performance optimization for the specific browser, and finally converts to the real DOM.

VirtualDom

What is vritualDom

Through the React. CreateElement method (…). A javaScript object that describes the structure of the DOM tree from which a real DOM can be generated.

The composition of the virtual DOM

This is the ReactElement object tree, and our component will eventually be rendered as the following virtual DOM:

  • Type: The type of the element, which can be a native HTML type (string) or a custom component (function or class);
  • Key: unique identifier of a component;
  • Ref: used to access native DOM nodes;
  • Props: The props of the component passed in. Children is a property of props, which stores the child node of the current component, either an array (multiple child nodes) or an object (only one child node);
  • Self: (non-production environment) specifies which component instance is currently located;
  • _source: (non-production) Specifies the file from which the debug code came (fileName) and the number of lines (lineNumber);

Why do you need the virtual DOM

Improve development efficiency

“Improve performance”

It goes without saying that manipulating the DOM directly is very performance-intensive. React uses virtualDOM to manipulate the DOM. VirtualDOM has no advantage if it is rendering for the first time, even though it does more computations and consumes more memory;

  • So why do we still need the virtual DOM

The advantage is React’s Diff algorithm and batch strategy. React calculates how to update and render the DOM in advance of page updates. So, it’s more likely to say that the virtual DOM helps us improve development efficiency by helping us calculate how to update more efficiently when repeating renderings, rather than that it’s faster than DOM.

Cross-browser compatibility

React implements an event mechanism based on virtualDOM, emulates event bubblings and capture, uses event proxies, batch updates, and smooths event compatibility across browsers.

Cross-platform compatibility

VirtualDOM provides React with cross-platform rendering capabilities. Take React- Native as an example. React draws the UI of the corresponding platform based on virtualDOM.

The diff algorithm

React Diff will help us figure out what really changed in virtualDom and only do the actual DOM manipulation on that part, rather than re-rendering the entire page.

Traditional diff algorithm

The traditional DIFF algorithm uses recursive loops to compare nodes in turn, and the time complexity is O(n^3), which is inefficient

React Diff algorithm policy

  1. Two identical components produce a similar DOM structure, and different components produce different DOM structures
  2. For a set of child nodes at the same level, they can be distinguished by a unique ID (key)

Based on the first strategy: The Diff algorithm only compares nodes in the same tier.

In other words, React will not compare child nodes if the parent nodes are different. Different components have different DOM structures, so there is no need to compare child nodes. This also improves the efficiency of comparison, reducing the event complexity to O(n).

The importance of the key value

React Key values must be stable (math.random cannot be used to create keys), predictable, and unique. This gives us two very important considerations for performance optimization:

  • Keep the DOM structure stable
  • Add a unique key

React determines whether to destroy and recreate components or update them based on the key:

  • React updates only the properties of components that change when the key is the same.
  • With different keys, the component destroys the previous component and re-renders the entire component.