Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article, "what are the differences between react and vue's diff algorithm?", so the editor summarizes the following, detailed contents, clear steps, and a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what are the differences between react and vue's diff algorithm?"

Differences: 1, when the node element type is the same, but the className is different, vue thinks it is a different type of element and will delete and rebuild it, while react will think it is a node of the same type and only modify node attributes; 2, list comparison, vue uses a comparison method from both ends to the middle, while react uses a left-to-right comparison method.

The operating environment of this tutorial: Windows10 system, react17.0.1 version, Dell G3 computer.

What's the difference between react and vue's diff algorithm?

Before talking about the diff algorithm, let's take a look at the virtual DOM:

Virtual DOM only retains some basic attributes of real DOM nodes and the hierarchical relationship between nodes, which is equivalent to a layer of "cache" established between javascript and DOM.

Virtual DOM is actually using an object to describe DOM, by comparing the differences between the two objects, and finally only re-rendering the changed part to improve the efficiency of rendering.

What is diff algorithm

React needs to maintain two virtual DOM trees at the same time: one represents the current DOM structure and the other is generated when the React state change is about to be re-rendered. By comparing the differences between the two trees, React decides whether and how to modify the DOM structure.

To put it simply, Diff algorithm is implemented on virtual DOM, which is the accelerator of virtual DOM and the magic weapon to improve performance.

The original diff algorithm

The original diff algorithm is actually traversing loop comparison, so I'm not going to draw here. To put it simply, it's very important. First of all, we must understand what the diff algorithm is, and then we know how the diff algorithm of vue and react is optimized.

The original diff algorithm is that two virtual dom trees are compared one by one, and they are not hierarchical. That is to say, if it is a virtual dom tree, from the root node to each node of the branch, it has to be compared with the newly generated node separately. This is the most primitive diff algorithm. The time complexity of this diff algorithm is O (n ^ 3), which appears to be (n ^ 2). Because comparing with the other n one by one, it must be the end of n ^ 2 times, but in fact it is not. After the comparison, we have to calculate how to place the best node in the best place, so it is O (n ^ 3). In fact, from the algorithm point of view, the original diff algorithm solves the need to compare first and then deal with the actual dom. But actually our process has become more complex and clumsy.

Optimized diff algorithm

In fact, I would like to say that the diff algorithms of vue and react are optimized diff algorithms, and they have the same optimization point, that is, peer comparison, no cross-level comparison.

That is, we can find that in the actual web presentation, the movement of non-peer nodes is very small, so we choose to make a peer comparison.

The explanation of peer comparison is that only nodes in the same layer are compared, and no comparison is made in different layers. For different layers, just delete the original node and create a new insert update node.

This is the picture I saw on the Internet. I am really lazy. If there is any infringement, please contact me to delete it. To put it simply, the tree structure is hierarchical, so the new and old tree structures can be compared. After the comparison, the actual dom operation will be carried out, which will reduce the overall reflow or redrawing caused by changing the data.

The difference of diff algorithm between Vue and React

The diff algorithms of vue and react ignore cross-level comparisons and only make peer comparisons. The patch function is transferred when vue diff, and the arguments are vnode and oldVnode, which represent the new and old nodes, respectively.

Vue compares nodes, when the node element type is the same, but the className is different, it is considered to be a different type of element, delete and rebuild, while react will think it is the same type of node, just modify the node attribute.

The list comparison of vue is done from two ends to the middle, while react is compared from left to right. When a collection only moves the last node to the first, react moves the previous nodes in turn, while vue only moves the last node to the first. In general, the vue comparison is more efficient.

The above is about the content of this article on "what are the differences between the diff algorithms of react and vue". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.