Introduction to the specific use of keys in react (code example)

This article brings you an introduction to the specific usage of keys in react (code examples). It has certain reference value. Friends in need can refer to it. Hope it helps.

We often encounter such warnings when developing react programs, and then we think: Oh! I forgot to add a key to the loop subcomponent~

Out of convenience, sometimes I will use the index of the loop as the key without thinking, but is this really good? What value is the best choice for key?

In order to understand, this article will analyze "key" from three aspects:

1. Why use key

2. Problems with using index as key

3. Correctly choose key

1. Why use key

The react official document describes key like this:

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.

2. Problems with using index as key

2.1 Controlled components

Simple display components such as span, These components are controlled components, meaning their values ​​will be the ones we give them.

If the subcomponent is only a controlled component, using index as the key may not cause any problems on the surface, but in fact the performance will be greatly affected. For example, the following code:

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

When the order of the element data source changes, the corresponding:

The components with keys 0, 1, and 2 have all changed, and the three subcomponents will be Re-render. (The re-rendering here is not destruction, because the key is still there)

Instead, we use the unique id as the key:

// ['张三','李四','王五']=>

    
• 张三
    
• 李四
    
• 王五

// 数组重排 -> ['王五','张三','李四'] =>

    
• 王五
    
• 张三
    
• 李四

According to the above update principle, neither the value nor the key of the subcomponent occurs. Changes only change the order, so react only moves them and does not re-render them.

2.2 Uncontrolled components

Components like input that can be changed arbitrarily by the user and are not controlled by us may cause problems when using index as the key. See the following example. ：

Subcomponent:

  render() {
    return (
      <p>
        </p><p>值：{this.props.value}</p>
        <input>
      
    );
  }
}

Parent component

{
this.state.data.map((element, index) => {
    return <child></child>
    })
}

We enter the corresponding values ​​​​in the first two input boxes:

Then add an element to the head:

Obviously, this result does not meet our expectations , let’s analyze what happened:

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

After the change:

    
值：5
    

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

It can be found that: key 0, 1, 2 have not changed. According to the rules, the component will not be uninstalled, only Update changed properties.

react only diffs the changes in the value in the p tag, but the value in the input box has not changed, so it will not be re-rendered, only the value of the p tag is updated.

When using the unique id as the key:

##

<div key="000">
    <p >值：0</p>
    <input />
</div>
<div key="111">
    <p >值：1</p>
    <input />
</div>
<div key="222">
    <p >值：2</p>
    <input />
</div>

After the change:

    
值：5
    

<div>
    <p>值：0</p>
    <input>
</div>
<div>
    <p>值：1</p>
    <input>
</div>
<div>
    <p>值：2</p>
    <input>
</div>

It can be obvious Found: The components with keys 111, 222, and 333 have not changed at all. React will not update them. It just inserts a new subcomponent 555 and changes the positions of other components.

3. Correctly choose key

3.1 Pure display

If the component is purely used for display and no other changes will occur, then use index Or there is no problem with using any other different value as the key, because no diff will occur and the key will not be used.

3.2 Recommended use of index

Not in any case there will be defects in using index as key, such as the following situation:

You want to render a list in pages, each time you click Page turning will re-render:

Use unique id:

第一页

    
• 张三
    
• 李四
    
• 王五

第二页

    
• 张三三
    
• 李四四
    
• 王五五

After page turning, the keys and components of the three records have changed, so the three sub-components will be unloaded and then re-rendered.

Use index:

第一页

    
• 张三
    
• 李四
    
• 王五

第二页

    
• 张三三
    
• 李四四
    
• 王五五

After turning the page, the key remains unchanged, the value of the subcomponent changes, and the component will not be uninstalled, only updated.

3.3 Subcomponents may have changed/use uncontrolled components

In most cases, there will be no problem using a unique id as the key of a subcomponent.

This id must be unique and stable, which means that the id corresponding to this record must be unique and will never change.

It is not recommended to use math.random or other third-party libraries to generate unique values ​​as keys.

Because when the data changes, the keys of the same data may also change, thus re-rendering, causing unnecessary waste of performance.

If the data source does not meet our needs, we can manually add a unique id to the data source before rendering instead of adding it when rendering.

The above is the detailed content of Introduction to the specific use of keys in react (code example). For more information, please follow other related articles on the PHP Chinese website!