React.js 官网资料摘记：列表&keys_react 中 keys i-CSDN博客

列表 & keys

这里举一个简单的map函数的演示：

const number=[1,2,3,4];
const doubleNumber=number.map((number)=>number*2);

渲染多样的组件

const number=[1,2,3,4];
const listItems=number.map((number)=>
    <li>{number}</li>
);
ReactDOM.render(
    <ul>{listItems}</ul>,
    document.getElementById("root")
);

基础列表组件

function NumberList(props){
  var number=props.numbers;
  const listItem=number.map((item)=>
    <li>{item}</li>
  );
  return (
    <ul>{listItem}</ul>
  );
}
const number=[1,2,3,4];
ReactDOM.render(
  NumberList({numbers:number}),
  document.getElementById("root")
);

keys

元素key只有在它和它兄弟节点对比时才有意义。

什么叫兄弟节点？形象一点的说法叫多胞胎，比如上面的li。一个ul下面可能有多个li，那么为了能从这么多个li中快速选取出我们所要的那个，就需要使用key。

在提取组件时，key的设置

比如说我写了这么一个蛋疼的组件组合：

function liLst(index){
    return (
        <li>{index}</li>
    );
}
function ulWrap(){
    return (
        <ul><liLst index={1} /></ul>
    );
}

那么问题来了，li的key放在哪个组件那里？

<li key={index}>{index}</li>
<ul><list key={1} index={1} /></ul>

答案是第二种，在组件调用时，设置在调用处。

当你在map()方法内部调用的元素时，你最好随时记得为每一个元素加上一个独一无二的key。

元素的key在他的兄弟元素之间应该唯一

简单点来说就是你家的几胞胎不能取一样的名字，但是可以和别人家的几胞胎取一样的名字。具体看下面这个例子：

function List(props){
  var numbers=props.numbers;
  const lst1=numbers.map((number)=><li key={number}>{number}</li>);
  const lst2=numbers.map((number)=><li key={number}>{number}</li>)
  return (
    <div>
      <ul>{lst1}</ul>
      <hr />
      <ul>{lst2}</ul>
    </div>
  );
}
ReactDOM.render(
  <List numbers={[1,2,3,4]} />,
  document.getElementById("root")
);

在jsx中嵌入map()

function ListItem(props){
  return (
    <li>{props.numbers}</li>
  );
}
function NumberLsts(props){
  var numbers=props.numbers;
  const listItems=numbers.map((number)=>
    <ListItem numbers={number} key={number} />
  );
  return (
    <ul>{listItems}</ul>
  );
}
ReactDOM.render(
  <NumberLsts numbers={[1,2,3,4]} />,
  document.getElementById("root")
);

或者对上面进行小小的修改：

function ListItem(props){
  return (
    <li>{props.numbers}</li>
  );
}
function NumberLsts(props){
  var numbers=props.numbers;
  return (
    <ul>{numbers.map((number)=>
    <ListItem numbers={number} key={number} />)}</ul>
  );
}
ReactDOM.render(
  <NumberLsts numbers={[1,2,3,4]} />,
  document.getElementById("root")
);