react 官网笔记 04 list与key

最新推荐文章于 2025-02-24 17:01:17 发布

dsdaq212zwsdas

最新推荐文章于 2025-02-24 17:01:17 发布

阅读量183

点赞数

CC 4.0 BY-SA版权

分类专栏： react官网阅读笔记

本文链接：https://blog.youkuaiyun.com/dsdaq212zwsdas/article/details/79276901

react官网阅读笔记专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在React中使用JSX生成元素列表，并强调了在列表项中使用key的重要性及正确用法。key有助于React高效更新DOM，且需确保唯一性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在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然后传递给组件内部