React关于渲染列表时的key属性

使用 JS 中的 map() 方法来遍历数组,可以把数组中的每个元素都映射成 <li> 标签或者其他组件

可以将以下内容插入到jsx里：

///let arr=[1,2,3,4,5,6]

<ul>
    {
       arr.map((ele,idx)=>
          <li key={ele.toString()}>{ele}</li>
  
           )
    }
</ul>

key可以省略，如果省略的话，React会默认将元素的索引作为列表项的key值

但是！！！一般不推荐将索引值作为列表项的key，因为React使用过key这个唯一标识来区分不同的列表项，哪些是新添加进来的，哪些是已经删除的；

如果将索引作为key值，因为当我们删除数组中的某一个元素时，其他元素对应的索引都有可能改变，因此就不能保证唯一标识列表项了！

另外，元素的 key 只有放在就近的数组上下文中才有意义

也就是说，当把某个元素渲染成组件（里面可能会嵌套多个子组件）时，我们需要将key属性添加到这个组件的最外层组件！！

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')
);

还有，数组元素中使用的 key 在其兄弟节点之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的 key 值：

最后，key 会传递信息给 React ，但不会传递给你的组件。如果你的组件中需要使用 key 属性的值，请用其他属性名显式传递这个值：

const content = posts.map((post) =>
  <Post
    key={post.id}
    id={post.id}
    title={post.title} />
);

上面的Post 组件可以读出 props.id，但是不能读出 props.key