What is the usage of key in react

In react, key is used to identify components. It can identify which elements have changed when certain elements in the DOM are added or deleted. It is a kind of identification; you can decide whether to destroy or delete based on the key. Update the component. If the key is the same and the component changes, only the corresponding properties of the component will be updated. If the key is different, the previous component will be destroyed and re-rendered.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is the usage of key in react

Simply put, react uses key to identify components. It is an identity identifier, just like our ID card is used to identify a person. . Each key corresponds to a component. React considers the same key to be the same component, so subsequent components corresponding to the same key will not be created.

Keys can help React identify which elements have changed when certain elements in the DOM are added or deleted. Therefore you should give each element in the array a certain identity.

React's diff algorithm treats the key as a unique ID and then compares the value of the component to determine whether it needs to be updated. Therefore, if there is no key, React will not know how to update the component.

You can use it without passing the key because after react detects that the subcomponent does not have a key, it will default to the index of the array as the key.

React determines whether to destroy, re-create or update the component based on the key. The principle is:

• The key is the same and if the component changes, React will only update the corresponding change in the component. properties.

• If the key is different, the component will destroy the previous component and re-render the entire component.

Usage scenarios of key

In project development, the most common usage scenario of the key attribute is the case of subcomponents dynamically created from an array. It is necessary to provide a key for each subcomponent. Add a unique key attribute value. Some people will naturally think that the value of key is very close to the index position obtained by the dynamically rendered sub-element. Can't we directly use index to attach the value of key? key={index}?

For example:

{dataList.map((item,index)=>{
    return <div style={mystyle} key={index}>{item.name}</div>
    })
}

After you try it, you will find that the error is gone and the rendering is no problem, isn’t it normal? ! However, it is strongly not recommended to use array index as key.

If the data update is simply a reordering of the array or the insertion of a new element in its middle position, then the view elements will be re-rendered.

For example:

After the element with index=2 is moved forward, the key of the element will also change. Then the Key that will change in this way will have no meaning. Since It exists like an "identity card", so there is no room for loss. Of course, when you use key values ​​to create subcomponents, if the content of the array is only for pure display and does not involve dynamic changes in the array, you can actually use index as the key.

Recommended learning: "react video tutorial"

The above is the detailed content of What is the usage of key in react. For more information, please follow other related articles on the PHP Chinese website!