This is the 15th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Related articles:

• Did you really get React? (a)
• Did you really get React? (2)
• Did you really get React? (3)
• Did you really get React? (4)
• Did you really get React? (5)

What does the key in React do?

What is it

First, give an example of a list rendering in the React component:

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>
  );
};
Copy the code

You can see the react warning message in the output:

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

Each child element of the render list should require a unique key value

You can use the id attribute of the list as the key value here to resolve the above warning

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

Second, the role of

Like Vue, React also has Diff algorithm, and the element key attribute is used to determine whether the element is newly created or moved, so as to reduce unnecessary Diff

Therefore, the value of key needs to give each element a definite identity

If the table data is rendered with an insert after the data, the key is not important, 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>
Copy the code

In the DIff algorithm, the previous elements are identical and do not need to be deleted. They need to be inserted into the new DOM tree for the last comparison

Therefore, in this case, it doesn’t matter whether the element has a key attribute or not

Let’s look at the difference between using a key and not using a key when inserting data:

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

When you have a key, react matches the children of the original tree and the children of the latest tree based on the key attribute, just inserting the 000 element in the first place

When there is no key, all the LI tags need to be modified

Again, it’s not that having a key value is a sign of better performance. If only the text content changes, it’s more performance and efficiency to not write a key

The main reason is that not writing the key is to replace all the text, and the node will not change

Writing a key involves adding and deleting nodes. If the old key does not exist, it is deleted. If the new key does not exist, it is inserted, which increases the performance overhead

Third, summary

Good use of the key attribute is a very critical step in performance optimization. Note the following:

• The key should be unique
• Do not use random values for key (the random number will be regenerated the next time it is rendered)
• Avoid using index as the key

The process of Judging key in React is as follows: