小鸡啄米之React Map遍历中的key

React中Map遍历与Key的重要性

最新推荐文章于 2024-06-17 14:34:14 发布

原创最新推荐文章于 2024-06-17 14:34:14 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

React 专栏收录该内容

22 篇文章

订阅专栏

本文深入探讨了在React中使用map遍历数组生成DOM元素时，key属性的重要性和作用。通过示例说明了如何正确设置key，以及它如何帮助提升应用性能和维护状态的一致性。

React Map遍历中的key

map遍历

map遍历

在jsx语法中，标签之间是可以使用{}来写js语法的，其中最常用的就是map遍历来输出一组标签

在react中一map出来的一组相同标签，必须提供一个key，这个key有利于提高程序运行和渲染效率，识别元素的增删，在局部环境中，key必须唯一，且不能改变

示例1：不提供key

const listItems = numbers.map((numbers) =>
  <li>{numbers}</li>
);

此时运行程序会提示需要提供key，将代码修改为
示例2：

  const listItems = numbers.map((number) =>
    <li key={number.toString()}>
      {number}
    </li>
  );

注意：key作为react内部变量，不会传递给组件，无法从组件中获取key值

jsx的{}中可以接受表达式，其结果是一个确定的值，不接受语句，不能出现var const let等关键字，如var a=1等
所以，也可以使用逗号表达式：
  {
    number=this.state.num,
    number.map(()=>{<Alert/>})
  }