react 列表&keys

目前我们学习到的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只会用来和兄弟元素比较.