Shulou(Shulou.com)05/31 Report--

Most people do not understand the knowledge points of this article "how to use key in react", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "how to use key in react" article.

In react, key is used to identify components. It is a kind of identity to identify which elements have changed when some elements in DOM are added or deleted. You can decide whether to destroy or update components according to key. If the key is the same, the corresponding attributes of components will only be updated if the components are changed. If the key is different, the previous components will be destroyed and re-rendered.

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

What is the use of key in react

To put it simply, react uses key to identify components, which is an identity, just like our ID card is used to identify a person. Each key corresponds to a component, and the same key react is considered to be the same component, so that subsequent components corresponding to the same key will not be created.

Keys can help React identify which elements have changed when some elements in DOM are added or deleted. So you should assign a definite identity to each element in the array.

React's diff algorithm treats key as a unique id and then compares the value of the component to determine if it needs to be updated, so you won't know how to update the component without key,react.

You can use it without passing key because when react detects that the subcomponent does not have key, it defaults to the index of the array as key.

According to the key, react decides whether to destroy and recreate the component or update the component. The principle is:

If the key is the same, the component will change, and react will only update the properties of the component corresponding to the change.

Unlike key, the component destroys the previous component and renders the entire component again.

Usage scenarios of key

In project development, the key attribute is most frequently used in the case of sub-components created dynamically by an array, and you need to add a unique key attribute value for each sub-component. Then some people will naturally think that the value of the index position obtained by key and the child elements of dynamic rendering is very close, so can not you directly use index to attach the value of key? key= {index}?

For example:

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

After you have tried, you will find that the error has been reported, and there is no problem with rendering. Isn't it normal? However, array index is highly deprecated as key.

If the data update is simply an array reordering or inserting a new element in the middle of it, the view elements will be re-rendered.

For example:

After the element of the original index=2 moves forward, then the key of the element is also changed, then the Key that will change does not have any meaning, since it exists as an "ID card", it cannot be lost. Of course, when you create subcomponents with key values, if the contents of the array are displayed purely and do not involve dynamic changes to the array, you can actually use index as the key.

The above is about the content of this article on "how to use key in react". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.