react入坑之列表和key（索引）

1 渲染列表

可以像下面这样渲染一个列表：

class List extends React.Component {
  constructor (props) {
    super(props)
  }
  render () {
    let list = this.props.number.map(number => ( // 拼装li
      <li>{number}</li>
    ))
    return (
      <ul>{list}</ul>
    )
  }
}

ReactDOM.render(
  <List number={[1, 2, 3, 4, 5]} />,
  document.getElementById('root')
)

也可以将 map() 调用通过 {} 内联到JSX中：

class List extends React.Component {
  constructor (props) {
    super(props)
  }
  render () {
    return (
      <ul>{
        this.props.number.map(number => ( // 内联map()方法
          <li key={number}>{number}</li>
        ))
      }</ul>
    )
  }
}

通常会使用数组的 map() 方法来从数组拼装列表，这与使用JavaScript拼装HTML类似。但上面的代码运行时会出现警告：

 
 

  
  
2 key


  
  
在渲染列表时，React的差异比较算法需要一个在列表范围内的唯一key来提高性能（通常用于获知哪个列表项改变了）。这个唯一的key需要我们手动提供。React官方建议使用列表数据中可用于唯一性标识的字段来作为列表项渲染时的key。如果实在没有，则可使用数组的index勉为其难，性能上可能会打折扣。
 
 

 let list = this.props.number.map(number => ( // 拼装li
      <li key={number.toString()}>{number}</li>
    ))
  
  

   
   
key的使用需要注意一下几点：

   
   

只能在数组内指定key：准确地说，只能在map()的回调函数中使用key


key需要在列表范围内保证唯一性：同一个数组中的key需要保证唯一性，但不同数组中的key无所谓

key不会作为props传入组件：可以认为key是React在JSX中的保留字，你不能用它来向组件传递数据而应该改用其他词