React学习：列表&&Key

在React中，把数组转化为元素，和js的map方法类似，返回一个数组类的元素

1.渲染多个组件

可以使用{}在jsx中构建一个元素集合

const number = [1, 2, 3, 4, 5, 6];
const listItem = number.map((item)=>{
    return <li>{item}</li>
})
ReactDOM.render( <ul>{listItem} </ul>,document.getElementById('root'))

2.基础组件列表

通常你需要在组件中去渲染一个列表，而不是构建一个元素集合，此时可以把上述构建抽离为一个组件。

// 列表 && Key,渲染为组件去使用
const number = [1, 2, 3, 4, 5, 6];
function NumberList(props){
    const listItem = props.numbers.map((item)=>
        <li>{item}</li>
    )
    return (
        <ul>{listItem}</ul>
    )
}
ReactDOM.render( <NumberList numbers={number} />, document.getElementById('root'))

此时运行会报没有key的警告，需要进行key的添加（跟Vue一样 key为循环的标识），以下会介绍key

const listItem = props.numbers.map((item,index)=>
     <li key={index}>{item}</li>
)

3.关于key

1.key帮助React进行标识什么元素更改了（新增/删除），因此需要给数组中的每一个元素进行key的添加。

2.key作为元素的标识 是必须且唯一的，一般我们会使用id来进行标识，如果没有其他可以进行标识的时候，也允许使用index，但是此时需要注意，

如果列表项目的顺序可能会变化，不建议使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。

3.在react中，不需要全局的key唯一，只需要确定兄弟节点的key是唯一的即可。

4.key只会传递给react，而不会去传递给子组件，如果子组件也需要父组件的key的信息，需要用其他属性名传递

5.在jsx中也可以进行嵌套map（），但是这种风格不能滥用，会造成代码不清晰。如果map（）嵌套过多，需要考虑提取组件

function NumberList(props) {
  const numbers = props.numbers;
  return (
    <ul>
      {numbers.map((number) =>
        <ListItem key={number.toString()}
                  value={number} />

      )}
    </ul>
  );
}