# 列表渲染 ## 基础列表 可以使用 `map()` 取出列表的每一项进行渲染: ```jsx function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li>{number}</li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ``` 运行这段代码的时候，会产生一个警告: >[warning] Warning: Each child in an array or iterator should have a unique "key" prop. ## keys 要消除警告，需要给每个列表元素分配一个 key 来解决上面的那个警告： ```jsx function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => <li key={number.toString()}> {number} </li> ); return ( <ul>{listItems}</ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={numbers} />, document.getElementById('root') ); ``` Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此需要给数组中的每一个元素赋予一个确定的标识。 一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串或数值。通常，我们使用来自数据的id作为元素的key: ```jsx const todoItems = todos.map((todo) => <li key={todo.id}> {todo.text} </li> ); ``` 当元素没有确定的id时，你可以使用他的序列号索引 index 作为 key: ```jsx const todoItems = todos.map((todo, index) => <li key={index}> {todo.text} </li> ); ``` 元素的key只有在它和它的兄弟节点对比时才有意义。 记住，在map()方法的内部调用元素时，记得为每一个元素加上一个独一无二的key！