1.js中转化列表
首先使用map()对数组进行翻倍，得到一个新的数组doubled
const numbers = [1,2,3,4,5];
const doubled = numbers.map((current,index,arr)=>{
return current*2
})
console.log(doubled) //[2,4,6,8,10];
在React中，把数组转换为数列元素的方法是相似的。
2.渲染多个组件
可以通过使用{}在jsx内构建一个元素集合
现在使用js中的map()方法遍历numbers数组，对数组中的每个元素返回<li>标签，然后我们得到一个listItems
const numbers = [1,2,3,4,5];
const listItems = numbers.map((current,index,arr)=>{
return (
<li>{current*2}</li>
)
})
//把得到的li列表插入ul中并且渲染出来
ReactDOM.render(
<ul>{listItems}</ul>,document.getElementById('root')
)
3.基础列表组件
有时候你需要渲染一个列表到组件中
我们把前面的例子重构成一个组件，组件接收numbers数组为参数，输出一个无序列表
function NumberList(props){
const numbers = props.numbers;
const listItems = numbers.map((current,index,arr)=>{
return <li>{current*2}</li>
})
return (
<ul className="hellos">{listItems}</ul>
)
}
const numbers = [1,2,3,4,5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
)
当我们运行这段代码，将会看到一个警告 a key should be provided for list items，意思是当你创建一个元素时，必须包括一个特殊的 key 属性。
这有点类似vue，我们需要给每个元素一个key来解决这个警告，每个li的key必须不相同
function NumberList(props){
const numbers = props.numbers;
const listItems = numbers.map((current,index,arr)=>{
return <li key={current}>{current*2}</li>
})
return (
<ul className="hellos">{listItems}</ul>
)
}
4.keys
keys可以在dom中某些元素被添加或者删除的时候，帮助React去识别哪一些元素发生了变化，因此应当在 数组 中的每一个元素添加一个key
一个元素的key最好是这个元素列表中 独一无二 的字符串，我们通常用来自数字的id，或者使用index
const test = arr.map((current,index,arr)=>{
//当其中有一个id的时候
return(
<li key={current.id}>{current.text}</li>
)
//没有id 的时候可以使用index
return(
<li key={index}>{current.text}</li>
)
})
如果列表可以重新排序，我们不建议使用索引来进行排序，因为这会导致渲染变得很慢。如果你想要了解更多，请点击深度解析key的必要性
5.用keys提取组件
元素的key只有在他和他的兄弟节点对比的时候才有意义
比如你提取一个<ListItem />组件，应该将key保存在数组中，这个ListItem这个组件上，而不是他里面的li上
function ListItem(props) {
// 对啦！这里不需要指定key:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 又对啦！key应该在数组的上下文中被指定
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
6.元素的key在他们兄弟元素之间应该是唯一
①在他们的兄弟间，也就是同一个数组中药唯一
②不需要全局唯一，就是2个数组中可以一样
注意：
key是用来作为React的提示，如果你需要传递与key相同的值，需要使用属性来传递。
const content = posts.map((post) =>
<Post
key={post.id} //无法读取
id={post.id} //可以读取
title={post.title} /> //可以读取
);
以上的例子中，可以读出props.id，但是无法读出props.key
7.在jsx中嵌入map()
JSX允许在大括号中嵌入任何表达式，所以我们可以在map()中这样使用：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
这么做有时候会使得你的代码更加清晰，但是常常这种风格也会被滥用，如果一个map()嵌套了太多层，此时可能就是需要提取组件的时候了。
