What is the function of key in React?

1. What is it?

First, give reactan example of list rendering in components:

const data = [
  { id: 0, name: 'abc' },
  { id: 1, name: 'def' },
  { id: 2, name: 'ghi' },
  { id: 3, name: 'jkl' }
];

const ListItem = (props) => {
  return <li>{props.name}</li>;
};

const List = () => {
  return (
    <ul>
      {data.map((item) => (
        <ListItem name={item.name}></ListItem>
      ))}
    </ul>
  );
};

 

reactThen you can see the prompted warning message in the output :

Each child in a list should have a unique "key" prop.

According to the meaning, each child element of the rendering list should need a unique keyvalue

Here you can use idthe attribute of the list as keythe value to solve the above warning

const List = () => {
  return (
    <ul>
      {data.map((item) => (
        <ListItem name={item.name} key={item.id}></ListItem>
      ))}
    </ul>
  );
};

 

Two, the role

Like Vuethe same, React there is also  Diffan algorithm, and keythe function of the element attribute is to determine whether the element is a newly created or moved element, thereby reducing unnecessary element rendering

Therefore key, the value needs to assign a certain identity to each element

If a piece of data is inserted after the data in the rendering of the list data, keythe effect is not significant, as follows:

this.state = {
    numbers:[111,222,333]
}

insertMovie() {
  const newMovies = [...this.state.numbers, 444];
  this.setState({
    movies: newMovies
  })
}

<ul>
    {
        this.state.movies.map((item, index) => {
            return <li>{item}</li>
        })
    }
</ul>

 

The previous elements are in diffthe algorithm. Since the previous elements are exactly the same, no deletion and creation operations will be generated. In the last comparison, they need to be inserted into a new DOMtree

Therefore, in this case, keyit doesn't make much sense whether the element has attributes

keyLet's take a look at the difference between using and not using when inserting data in the front key:

insertMovie() {
  const newMovies = [000 ,...this.state.numbers];
  this.setState({
    movies: newMovies
  })
}

 

When you have it key, match the sub-elements on the original tree and the sub-elements on the latest tree reactaccording to the attributes. In the above case, you only need to insert the 000 element to the front positionkey

When there keyis none, all litags need to be modified

Similarly, it does not mean that having keya value means higher performance. If only the content of the text has changed, keythe performance and efficiency will be higher if it is not written.

The main reason is that not writing keyis to replace all the text content, and the nodes will not change

Writing keyinvolves the addition and deletion of nodes. If it is found that the old one keydoes not exist, it will be deleted, and if the new one keydoes not exist before, it will be inserted, which increases performance overhead.

3. Summary

Good use of keyattributes is a very critical step in performance optimization. The precautions are:

• key should be unique

• Do not use random values ​​for the key (the random number will regenerate a number in the next render)

• Using index as the key value does not optimize performance

reactThe judgment keyprocess is as follows: