react 官网笔记 04 list与key

在jsx中我们可以向在js中操作数组的那些迭代方法一样来生成react element列表,切记需要包裹在{} 中.比如map

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <li>{number}</li>
  );
  return (
    <ul>{listItems}</ul>
  );
}

const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
  <NumberList numbers={numbers} />,
  document.getElementById('root')
);

当你运行这段代码的时候会收到一个提醒,要求为每个item 的react element元素提供一个key属性,key的值应该是一个string类型,在一个react element元素数组中,每个元素的key应该保持唯一,大部分你可以使用对应state的item的id去标识,如果没有,可以用下标index,但是如果对list进行排序就不要使用这种方式,否则可能会对性能产生负面影响,同时index也是react在你不使用key时默认方案.

 同时key只在数组环境中起作用,比如<ListItem>, 而不是在ListItem内部render中的<li>标签中使用key,这样是不起作用的.key与array是结合在一起使用的的

 记住一个规则: 只有react element 在map函数下,才需要使用key

 key的唯一性只局限于同一个数组下,对于不同数组的react element 可以使用相同的key 

 key只是提供给react的一个标记,他不会传递给组件内部,因此如果在组件内你需要key的value就需要自定义一个新key然后传递给组件内部

s