Array.map()函数
const numbers = [1, 2, 3, 4, 5]
const doubled = numbers.map(number => number *2)
同样地,通过数组的map函数将数组转换成React元素列表
1. 组件中渲染列表
function NumberList(props) {
const numbers = props.numbers
const items = numbers.map(number => {
<li key={number.toString()}>{number}</li>
})
return (
<ul>{ items }</ul>
)
}
or
function NumberList(props) {
const numbers = props.numbers
return (
<ul>
{numbers.map(number => {
<li key={number.toString()}>{number}</li>
})
}</ul>
)
}
2. key
- key能够让React识别哪些元素改变/删除/添加了,必须给每个元素赋予唯一标识
- 独一无二的key,通常使用id
- 万不得已可以用index作为key,这也是不声明时React的默认选择
- 使用index作为key时,可能会倒置性能变差,引起组件状态问题
- key的声明必须在数组上下文中才有意义
- ke只是在兄弟节点之间比唯一,与其他节点无关联无影响