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只會用來和兄弟元素比較.