React Diffing algorithm

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Verify the Diffing algorithm

class Time extends React.Component {
  state = {date: new Date()}
  componentDidMount() {
    setInterval(() = > {
      this.setState({date: new Date()})},1000)}render() {
    return (
      <div>
        <h1>hello</h1>
        <input type="text"/>
        <span>Now is: {this. State. Date. ToTimeString ()}</span>
      </div>
    )
  }
}
ReactDOM.render(<Time/>.document.getElementById("test"));
Copy the code

As you can see from the above example, the time in the SPAN tag is updated every second. You can prove that the input tag is updated with the span tag by entering it in the input tag. Therefore, the minimum granularity of Diffing algorithm comparison is node.

The key used to traverse the list

Classic interview questions:

1. What do React/Vue keys do? What is the internal mechanism of key?
2. Why is it best not to use index for key when iterating through a list?

{id: 1, name: 'xiao li ', age: 18} {id: 2, name:' xiao Li ', age: 18} 19} Initial virtual DOM: 
 Xiao Zhang -- 18
 
 Xiao Li -- 19
 Update data: {id: 3, name: 'Xiao Wang ', age: 20} {id: 1, name: {id: 2, name: 'xiao Li ', age: 18} 19} Virtual DOM after updating data: 
 Xiao Wang -- 20
 < Li key=1> Xiao Zhang -- 18 < Li key=2> Xiao Li -- 19 Because the index is different, both Xiao Zhang and Xiao Li are not reused, and the efficiency becomes low. -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - the initial data using id uniquely identifies as a key 】 【 : {id: 1, name: 'xiao zhang, age: 18} {id: 2, name: DOM: 
 DOM -- 18
 
 DOM -- 19
 1, name: 'xiao Zhang ', age: 18} {id: 2, name:' Xiao Li ', age: 18} 19} Virtual DOM after updating data: 
 Wang -- 20
 
 Xiao Zhang -- 18
 
 Xiao Li -- 19
 Xiao Zhang and Xiao Li are reused and the efficiency is improved. * * /
class Person extends React.Component {
  state = {
    persons: [{id: 1.name: "Zhang".age: 18 },
      { id: 2.name: "Xiao li".age: 19},]}; add =() = > {
    const { persons } = this.state;
    const p = { id: persons.length + 1.name: "Wang".age: 20 };
    this.setState({ persons: [p, ...persons] });
  };
  render() {
    return (
      <div>
        <h2>Display personnel information</h2>
        <button onClick={this.add}>Add a little wang</button>
        <h3>Use index as the key</h3>
        <ul>
          {this.state.persons.map((personObj, index) => {
            return (
              <li key={index}>
                {personObj.name} --- {personObj.age}
                <input type="text" />
              </li>
            );
          })}
        </ul>
        <h3>Use the ID unique identifier as the key</h3>
        <ul>
          {this.state.persons.map((personObj) => {
            return (
              <li key={personObj.id}>
                {personObj.name} --- {personObj.age}
                <input type="text" />
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}
ReactDOM.render(<Person />.document.getElementById("test"));
Copy the code

1. Key functions in the virtual DOM:

• Simply put: The key is the identity of the virtual DOM object and plays an extremely important role in updating the display.
• When data in the state changes, React reacts based onThe new datagenerateNew virtual DOMAnd then ReactNew virtual DOM 与Old virtual DOMFor Diff comparison, the rules are as follows:
  • Old virtual DOM 中To find thewithNew virtual DOMSame key:
    1. ifVirtual DOMSame as beforeReal DOM.
    2. ifVirtual DOMIf the content in theReal DOM, and then replace the previous one on the pageReal DOM.
  • Old virtual DOM 中Not foundwithNew virtual DOMSame key:
    1. Create a new real DOM from the data and render it to the page.

2. Possible problems with index as key:

• Out-of-order operations such as adding or deleting data in reverse order will result in unnecessary real DOM updates — the interface is fine but inefficient.
• If the structure also contains the input DOM class: error DOM update –> interface is wrong
• Note: If there is no data in reverse order to add, delete and other out of order operations, only for the rendering list for display, using index as the key is no problem.

3. How to select key in development:

• It is better to use the unique identifier of each piece of data as the key, such as ID, mobile phone number, ID number, student number and other unique values.
• If you are sure to simply display data, index is fine.