key 在React开发中的作用

遇到的warning

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

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

class Contacts extends Component {
  render() {
    console.log('props',this.props)
    return (
        

            

            {this.props.contacts.map(contact=>(
                

                {contact.name}
                
 )
                )
            }
            
        
        );
    }
}

export default Contacts;

在App中使用这个组件：

class App extends Component {
  render() {
    return (
      

        
        
      
    );
  }
}

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

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

解决：

import React, { Component } from 'react';

class Contacts extends Component {
  render() {
    console.log('props',this.props)
    return (
        

            

            {this.props.contacts.map(contact=>(
                
  // 定义key值
                {contact.name}
                
 )
                )
            }
            
        
        );
    }
}

export default Contacts;

说明：

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