React笔记8（列表 & Keys）

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()嵌套了太多层，此时可能就是需要提取组件的时候了。