目前我们学习到的react知识并没有告诉我们如果如何自动生成重复的元素，但是聪明的你肯定能够想到，既然是jsx，那我们肯定可以使用js的循环语句来实现。那么确实是这样子的。看看我们如何根据一个数组渲染出一组列表
function ItemList(props) {
return (
<ul>
{props.numbers.map(number=>(
<li>{number}</li>
))}
</ul>
)
}
只要我们给ItemList组件传入一个numbers数组属性，就可以得到一个列表。
但是这样我们会发现控制台给我们了一个警告。
ItemList Warning
就是我们如果用map这类的循环来生成元素的话，我们最好给每个元素加上key属性，这个key属性到底有什么用呢？我们看看官方给出的解释：
Keys可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。因此你应当给数组中的每一个元素赋予一个确定的标识。
总的来说，key属性可以加快react渲染组件的速度，关于key的深层原因可以看这篇文章 递归子节点
从直观上来说，key应该是唯一的，react中不需要key是全局唯一的，只需要在相邻的兄弟元素中是唯一的就可以了，因为react只会用来和兄弟元素比较.
网友评论