The react principle

VDOM

In terms of how react works, the VDOM is essential and the most important.

It can be said that without VDOM there would be no React and there would be no big front-end development direction today.

Virtual DOM is a JS way to achieve the SIMULATION of DOM, we know in the operation of native JS, a large number of DOM operations merged together, and then to modify DOM, so that we can optimize our performance.

Therefore, the virtual DOM is used to simulate the DOM tree, and then the way to do batch updates to the page appears. This allows declarative development to be widely used in real development.

Virtual DOM:

{
    tag:'div',
    props:{
        className:'',
        id:''
    },
    children:[]
}
Copy the code

VDOM compares the current VDOM to the last VDOM to see which parts of the page need to be rendered and then updates the DOM tree in batches in a single operation.

This comparison operation, we call the diff algorithm.

Diff algorithm optimization

The Diff algorithm compares two DOM trees, which presents us with a problem. The time complexity of comparing two trees is O (n^3), which doesn’t seem to make it into production.

So the smart front-end engineers optimized the algorithm.

Instead of an exact DOM comparison, we only compare peer nodes.

If they have the same tag and key, then we assume they are the same.

If the tag and key change, kill the node and all its children and replace the new node.

Thus, the time complexity of the DIff is greatly reduced to O (n) and ready for production.

VDOM’s contribution to cross-platform

My understanding of cross-platform is that it emulates DOM through VDOM.

Then the API of various platforms is used to parse VDOM to achieve cross-platform front-end development.

(I haven’t learned that much yet, maybe I’m wrong.)

The patch function

In React, the patch function is called patch. In React, the patch function is called patch.

Used to compare old and new nodes

The essence of the JSX

JSX is neither JS nor HTML in nature

So what exactly is JSX?

The essence of JSX is the react. createElement function, which takes three arguments (‘ tagName ‘, {attribute}, child node)

Vnodes are produced using this function.

React composite event

If you look at the React documentation, you might wonder why events in React are called composite events.

This is because react events are mounted on Document after react encapsulates native events (react17 is mounted on the root node).

Called SyntheticEvent. Through event bubbling, the triggered event is caught and sent to the event handler.

Compared to Vue. Vue’s events are native.

React unifies events for better compatibility in the future.

It also reduces memory consumption.

This facilitates unified event management.

React setStete batchUpdate

So what we said earlier, why is react setState sometimes asynchronous and sometimes synchronous?

This is related to the React batchUpdate.

At the start of the function react initializes a variable batchUpdate set to true. React sets batchUpdate to false at the end of the function.

When we do setState, we put setState in the state queue.

Determine the batchUpdate

  • If true, this component is put in dirtyComponents.
  • If false, all dirtyComponents are iterated over and updated.

So we know that setState in asynchrony, when you call setState, batchUpdate has changed to false. So that directly triggers setState.

The react of fiber

React triggers the DIff algorithm when the react patch is updated to compare the old and new nodes.

But when our component is too large, the diff time can be very long, which can cause the page to stagnate again.

React to solve this problem by means of fiber, the react to the diff is divided into small pieces and through the window. The requestIdleCallback () this API, at the end of each frame his execution.

This is done by turning the tree-like VDOM into a linear linked list, dividing it into many small fragments, and performing comparisons at the end of each frame.