key 在React开发中的作用

遇到的warning

我们在使用React可能会遇到下面这种情况.
首先定义一个Contact组件：

//contacts是使用Contacts的地方定义的一个数组
import React, { Component } from 'react';

class Contacts extends Component {
  render() {
    console.log('props',this.props)
    return (
        <div>
            <ol className = 'contact-list'>
            {this.props.contacts.map(contact=>(
                <li>
                {contact.name}
                </li> )
                )
            }
            </ol>
        </div>
        );
    }
}

export default Contacts;

在App中使用这个组件：

class App extends Component {
  render() {
    return (
      <div className="App">
        
        <Contacts contacts={contacts}/>
      </div>
    );
  }
}

这个时候在chrome浏览器打开console，会有一个错误提示

warning的原因是没有给li这个元素定义key值。

解决：

import React, { Component } from 'react';

class Contacts extends Component {
  render() {
    console.log('props',this.props)
    return (
        <div>
            <ol className = 'contact-list'>
            {this.props.contacts.map(contact=>(
                <li key = {contact.id}>  // 定义key值
                {contact.name}
                </li> )
                )
            }
            </ol>
        </div>
        );
    }
}

export default Contacts;

说明：

这个warning是说每个数组或者迭代器都应该有一个唯一的key属性。
需要这样做的原因是：最终每个列表项可能会发生变化，而当每个列表项有了唯一的key属性，React就能明确知道列表中的那一项发生了变化，而无需每次都重新创建那个列表。