列表和Key

列表 & Key

在JavaScript中如何转化列表。 如下代码，我们使用map()函数让数组中的每一项变成双倍，然后我们得到了一个新的列表doubled并打印出来：

const numbers=[1,2,3,4,5];
const doubled = numbers.map(function(number){
    return number * 2
})
console.log(doubled)

代码打印出 [2,4,6,8,10]。 在React中，把数组转化为元素列表的过程是相似的。

渲染多个组件

你可以通过使用{}在JSX内构建一个元素集合。 下面，我们使用JavaScript中的map()方法来便利numbers数组。将数组中的每个元素变成<li>标签，最后我们将得到的数组赋值给listItems：

const numbers = [1,2,3,4,5]
const listItems = numbers.map(numbers => <li>{number}</li>)

然后把 listItems插入到<ul>元素中，然后渲染：

function UlItem(){
    return (
        <ul>
            {listItems}
        </ul>
    )
}

ReactDOM.render(<UlItem  />,document.querySelector("#root"))

基础列表组件

通常你需要在一个组件中渲染列表。 我们可以吧前面的例子重构成一个组件，这个组件接受numbers作为参数，并输入一个元素列表。

function NumbersList (props) {
    const numbers = props.numbers;
    const LiItems = numbers.map(number => <li key={number}>{number}</li>)

    return (
        <ul>
            {LiItems}
        </ul>
    )
}

ReactDOM.render(<NumbersList numbers={numbers}  />, document.querySelector("#root"))

如果我们不给 li一个key，将会看到了一个警告a key should be provided for list items,意思是当你创建一个元素的时候，必须包括一个特殊的key属性。

Key

key帮助React识别哪些元素改变了，比如添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。 一个元素的key最好是这个元素在列表中拥有的一个独一无二的字符串。 如果列表的顺序可能会变化，我们不建议使用索引来作为key的值，因为会导致性能变差。最好使用和列表项目的绑定在这个项目上的不变的一个字符串，例如id。

用key提取组件

元素的key只要付昂在就近的数组上下文中才有意义。 比方说，如果你提取去一个ListItem组件，你应该把key保留在数组中的这个元素上，而不是放在ListItem组件中的li上。 一个好的经验法则是：在 map()方法中元素需要设置key属性。

key只是在兄弟节点之间必须唯一

数组元素中使用的key在其他兄弟节点应该独一无二。然后他们不需要是全局额日益的。当我们生产两个不同的数组时候，我们可以使用相同的key值。

key会传递信息给React，但是不糊传递给你的组件。如果需要使用key的值，请用其他属性名显式的传递这个值。

在jsx中嵌入map()

通过嵌入map修改上面例子：

function NumbersList (props) {
    const numbers = props.numbers;
    const LiItems = numbers.map(number => <li key={number}>{number}</li>)

    return (
        <ul>
            {numbers.map(number => <li key={number}>{number}</li>)}
        </ul>
    )
}

ReactDOM.render(<NumbersList numbers={numbers}  />, document.querySelector("#root"))

这么做有时可以使你的代码更细，但有时这种风格也会被滥用。就像在JavaScript中一个，何时需要为了可读性提取出一个变量。但是请记住，如果一个 map()嵌套了太多层级，那么可能就是你提取组件的一个好时机。