React’s Diffing algorithm

When the virtual DOM is converted to the real DOM, a comparison is made using the Diffing algorithm. If it has already been rendered once, when it is rendered again, the nodes with the same key value will be compared, and if the content is the same, the original real DOM will be reused.

Classic interview questions:

  1. What does the key in react/vue do? (What is the inner workings of key?)

  2. Why is it better not to use index as key when you’re going through a list?

Functions of keys in the virtual DOM

  1. In short, key is the identity of the virtual DOM object, and it plays an extremely important role in updating the display.

  1. In detail, when the data in the state changes, React will generate [new virtual DOM] according to [new data], and then React will diff the [new virtual DOM] and [old virtual DOM]. The comparison rules are as follows:

    A. The old virtual DOM finds the same key as the new virtual DOM :(1) if the contents of the virtual DOM remain unchanged, the previous real DOM is directly used; (2) If the content in the virtual DOM is flat, a new real DOM will be generated, and then the previous real DOM in the page will be replaced

    B. The old virtual DOM does not have the same key as the new virtual DOM

Using index as the key may cause problems

  1. If data is damaged by operations such as adding or deleting data in reverse order, unnecessary real DOM update will occur. ===> The interface has no effect, but the efficiency is low.

  2. If the structure also contains the DOM of the input class: Generates incorrect virtual DOM updates ===> There is a problem with the interface

    In the following example, if index is used as the key, the key of the input box is unchanged according to the comparison rules, so the rendering of input does not change after comparison, and the real DOM before is directly used (the tag node is reused), but in fact, the value corresponding to index has changed, so confusion will occur. This does not matter if new is added to the end.

  3. If there are no operations such as adding or deleting data in reverse order, it is only used to render the list display. It is ok to use index as the key.

Attached is the JSX code for the examples in this article.

class Person extends React.Component { state = { persons: [ { id: 1, name: 'yy', age: 18 }, { id: 2, name: 'xx', age: 19 }, { id: 3, name: 'zz', age: 20 }, ] } add = () => { const { persons } = this.state; const p = { id: persons.length + 1, name: 'new', age: 22 } this.setState({ persons: [p, < span style = "color: RGB (50, 50, 50); color: RGB (50, 50, 50); line-height: 20px; white-space: normal;" <ul> { this.state.persons.map((personObj, index) => { return <li key={personObj.id}>{personObj.name}---{personObj.age} <input type="text" /> </li> }) } </ul> <hr /> < span style = "box-sizing: border-box; color: RGB (50, 50, 50); line-height: 25px; white-space: normal;" index) => { return <li key={index}>{personObj.name}---{personObj.age} <input type="text" /> </li> }) } </ul> </div> ) } } ReactDOM.render(<Person />, document.getElementById('test'));Copy the code