What is the role of key value in React and what is the usage of key value? (with code)

What this article brings to you is about the role of key values ​​in React and what is the usage of key values? (Attached is the code), which has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

You will always encounter such a pit in react projects

This is a warning that array traversal of sub-elements requires There is a unique key value, but what exactly is the key and what role does it play in the code?

key overview

The key attribute in react is a special attribute. Its appearance is not for developers (for example, after you set the key for a component, it still cannot be obtained. The key value of this component) is used by react itself.
To put it simply, 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.

Key Usage Scenarios

In project development, the most common usage scenarios of key attributes are subcomponents dynamically created from arrays. It is necessary to add a unique key attribute value to each subcomponent. . Some people will naturally think that the value of the index position obtained by the key and the dynamically rendered sub-element is very close. Then can’t the value of the key be directly attached to the index using the index? key={index}?

例如：
{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

After you try it, you will find that the error is gone and there is no problem with rendering, isn't it normal? ! However, it is strongly not recommended to use array index as key.
If the data update is only 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 has no meaning of existence. Since it is used as " "ID card" exists, so there is no room for error. 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.

The value of the key must be unique and stable

After dealing with the Key value several times, I feel that the key value is similar to the primary key id in the database, which is unique and unique.

//this.state.users内容。注意：李四和王五的id相同！！！
this.state = {
 users: [{id:1,name: '张三'}, {id:2, name: '李四'}, {id: 2, name: "王五"}],
 ....//省略
}
render()
 return(
  <p>
    </p><h3>用户列表</h3>
    {this.state.users.map(u => <p>{u.id}:{u.name}</p>)}
  
 )
);

Note that in the above example, in the dynamically rendered data, the key is determined by the ID of the data. However, the IDs of Li Si and Wang Wu are the same, which leads to the same key. The final rendering result is Zhang San and Li Four, Wang Wu was not displayed. The main reason is that React thinks that John Four and Wang Five are the same component based on the key (the key values ​​of John Four and Wang Five are the same), causing the first one to be rendered, and the subsequent ones will be discarded.

In this way, with the key attribute, a corresponding relationship can be established with the component. React will decide whether to destroy, re-create or update the component based on the key

And the Key must also be guaranteed The stability of the value, for example:

{dataList.map((item,index)=>{
        return <p>{item.name}</p>
        })
}

Especially as shown in the above example, the value of key is determined by Math.random()randomly generated, which makes each item in the array element Destroying and re-creating them all has a certain performance overhead; in addition, it may cause some unexpected problems.

Therefore, the value of Key must ensure its uniqueness and stability

Related recommendations:

How to read the key value in redis Results in

React Native react-navigation navigation usage detailed explanation

The above is the detailed content of What is the role of key value in React and what is the usage of key value? (with code). For more information, please follow other related articles on the PHP Chinese website!