Shulou(Shulou.com)06/01 Report--

This article is about the usefulness of the key attribute in the html list. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

The time complexity of diff algorithm is O (n), and its implementation is based on the following two assumptions:

Two different elements of type generate different DOM trees

In two renderings, React can use the key attribute to determine which child element remains the same

This paper focuses on hypothesis 2 to explain how the diff algorithm achieves the time complexity of O (n).

If there is no key attribute

When traversing the child element list, React iterates through the new and old child element list at the same time, and generates a mutation if there is a difference between the two lists.

Duke

Villanova

Connecticut

Duke

Villanova

For example, when you add an element before the child element list, if there is no key attribute, React iterates through both the new and old child element arrays:

The first li tag has been changed, updated

The second li tag has been changed, updated

Finally insert the third li tag

The time complexity of this algorithm is O (n), but it will lead to a lot of unnecessary DOM operations and poor performance. Performance can be optimized if unnecessary DOM operations can be avoided through a list comparison algorithm.

Levenshtein Distance algorithm

To use the algorithm to optimize performance, let's make an abstract, old list of child elements from the above question:

[1, 2, 3, 4, 5]

After a series of operations of deleting, inserting, and modifying DOM nodes, we get a new list:

[6, 3, 1, 2, 5, 4]

Know the new and old order to find the minimum insert, delete, and modify operations, which is the minimum editing distance of the array. The most common is the Levenshtein Distance algorithm.

To give an example: find the minimum editing distance of beaut ([formula]) and ebau ([formula]), where [formula] is an unknown character. Dynamic programming algorithm is to split the problem and define the relationship between the state and the state of the problem, so that the problem can be solved recursively (or divide and conquer). Define the minimum editing distance of the string str1 of length "I-1" and the string str2 of length "j-1" as [formula], then the minimum editing note [formula] of beaut ([formula]) and ebau ([formula]) can and can only be based on the following three states:

"State 1": the minimum editing distance between beaut ([formula]) and ebau is known, recorded as [formula]

"State 2": the minimum editing distance of beaut and ebau ([formula]) is known, recorded as [formula]

"status 3": the minimum editing distance of beaut and ebau is known, recorded as [formula]

The relationship between [formula] and the three states is the following three formulas respectively:

[formula]

[formula]

[formula]

Explain the third formula, in the case of [formula], [formula]; if [formula], then [formula]. Then the one with the smallest value of the above three formulas is the solution of the formula. Compared with the following figure, the value of [formula] can be determined by the diagonal above, left, and upper left. The formula is as follows:

[formula]

[formula]

[formula]

Function minDistance (S1, S2) {

Const len1 = s1.length

Const len2 = s2.length

Let matrix = []

For (let I = 0; I

);

Thank you for reading! This is the end of this article on "what is the use of key attributes in the html list?" I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

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.