1. Origin algorithm
After calling render () method React, React elements will generate a tree.
Called again to generate a new tree. React difference between the two, and then update the UI.
If the simple algorithm used to find the difference between two values of the DOM tree, the algorithm complexity is O (n ^ 3).
In order to improve rendering efficiency, assuming that:
1) the different types of elements are different trees
2) to determine whether the child element can be stabilized by the key value
Such algorithm complexity is reduced to O (n)
2. The algorithm comparing step
1. Comparison of the root node
If the types are different, uninstall the entire DOM node, reload;
If the same type
1) If an ordinary html tag type attribute comparison, update the changing properties.
2) If the component type, update props, and componentDidUpdate method call triggered componentWillReceiveProps
2. Comparison of child nodes (without key)
If the types are different, the byte unloading point, reload;
If the same type, the byte sequence comparison point content
1) In this case, the minimum cost of an additional element, are the same as the foregoing;
2) the most expensive element is inserted into the head; for comparison, starting with the first to the last one are not the same.
<ul> <li>Duke</li> <li>Villanova</li> </ul> <ul> <li>Connecticut</li> <li>Duke</li> <li>Villanova</li> </ul>
3. Comparison of child nodes (with non-key index)
In the case above, if all children of the same list has a unique value key value.
React first key value comparison, if the same key value is present, but at different positions, only the position movement.
Location of mobile elements can only move between the brothers.
<ul> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul> <ul> <li key="2014">Connecticut</li> <li key="2015">Duke</li> <li key="2016">Villanova</li> </ul>
4. Comparison of child nodes (with a key index)
˙ this case, if the byte order point change may cause errors.
For example, the list of sub-assembly contains a non-controlled input. At this point if the trigger sorting, will lead to input the state appears tampered with each other.