vue of the key values of the dislocation caused by rendering murder

Originally a small program have been completed almost perfectly, yesterday junior partner marketing department take the test, and after a while children threw me a picture densely written question above, it can be said that I was so scared, watching the results after problems are found questionnaire data, these are the thinking and I have no melon, but be careful not to cast a glance in several places there was a dislocation of the options issue, he found himself brought a measure is really the case.

The problem is that many types of questions based on a question cascade, when I click on that channel-specific questions in the order when the dislocation will not happen, but when I'm the opposite of order when there will be dislocation phenomenon

Further information is found in print, in fact, I got in the sub-components of the data is already wrong information, but when I print the parent component is right, so where exactly is the problem then?

After an afternoon of Baidu, it does not seem to find a good solution, go back at night to ask roommate roommate said, probably because the key cause, I think it is wrong ah, it is not the only key values, I use the index should not have problem ah, the fact that I really was a new understanding thorough enough, I put the key values ​​into a unique id rendering to normal! ! !

The problem is not the only index it? So today I went to found a bit problem.

In fact, the original is not recommended to do the key index values, but we feel that this is actually his only, not really, but every time he went to re-rendered in accordance with this index, if we want to insert a new rendering of the array data, because the index will direct all of the data is re-rendered, apparently so in terms of performance is not good. This time just like the original location of the index has gone wrong, it led me to the dislocation problem, for this reason we must say diff algorithms underlying framework used, which react with the same.

The core is:

1. The same components have a similar two DOM structure, different components have different DOM structure

2. a set of nodes of the same level, they can be distinguished by a unique id. Based on the above assumptions these two points, so that the complexity of the algorithm virtual DOM Diff from O ( n^2) down to O (n)

What does that mean? The picture below will express more clearly some of the

diff explanation

We want to explore is the same level of different nodes, because the default diff algorithm is from left to right one by one to find the location you want, such efficiency is the very bottom

aims --->result

So it will need a unique key value identifies the diff algorithm to make direct find the right spot to insert a new node, this time it means that the index is not appropriate, because his default algorithm itself according to the index to find the location of therefore key to value if the index is actually meaningless.

After this short stepped pit, then I no longer have to do the key index values, and who knows when it will suddenly somehow the wrong point

 

 

Guess you like

Origin www.cnblogs.com/fdd-111/p/11803380.html