React基础第八章（列表渲染map、filter与key）

在React开发中，列表渲染是常见的需求。本文将围绕React中的map、filter方法和key属性展开，提供实用技巧和示例代码，并指出常见的注意事项。

使用map方法渲染列表

map方法可以将数据数组转换为组件数组，是渲染列表的常用技术。它会遍历数组中的每个元素，然后对每个元素执行提供的函数，并将结果收集成一个新数组返回。

技巧：

使用map方法将数据数组映射为JSX元素数组。
在map回调中直接返回JSX元素，简化代码。
map不会修改修改原数组，而是返回新数组

示例：

const scientists = [
  '凯瑟琳·约翰逊: 数学家',
  '马里奥·莫利纳: 化学家',
  // ...更多科学家
];

const List = () => {
  const listItems = scientists.map((scientist, index) => (
    <li key={index}>{scientist}</li>
  ));
  return <ul>{listItems}</ul>;
};

注意事项：

在map方法中返回的元素需要有唯一的key属性。
避免使用数组索引作为key，除非列表项不会重新排序。

正确代码：

const listItems = scientists.map((scientist, index) => (
  <li key={scientist}>{scientist}</li>
));

错误代码：

const listItems = scientists.map((scientist, index) => (
  <li>{scientist}</li> // 错误：没有key属性
));

// 浏览器控制台会报错：Warning: Each child in a list should have a unique “key” prop.

在这种情况下，如果列表项的内容是稳定且不会变动的，且列表不会进行排序、添加、删除等操作，那么使用数组索引作为key是可以的。但这并不是最佳实践。

最佳实践是使用列表项中的一个唯一且稳定的属性作为key。如果数据项中有唯一标识符（如ID），应当使用它。如果没有，可以考虑使用内容本身作为key，前提是内容是唯一的。

这里有一个例子：

const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

const FruitList = () => {
  const listItems = fruits.map(fruit => (
    <li key={fruit}>{fruit}</li>
  ));
  return <ul>{listItems}</ul>;
};

在这个例子中，每个水果名称都是唯一的，所以直接使用fruit字符串作为key是合适的。这样即使数组的顺序发生变化，React也能够正确地追踪每个列表项的状态。

如果数组中有重复的字符串，那么这种方法就不适用了，因为key必须是唯一的。在这种情况下，你可能需要生成一个唯一的标识符，或者结合字符串和索引来创建key。例如：

const fruits = ['Apple', 'Banana', 'Apple', 'Date'];

const FruitList = () => {
  const listItems = fruits.map((fruit, index) => (
    <li key={`${fruit}_${index}`}>{fruit}</li>
  ));
  return <ul>{listItems}</ul>;
};

在这个修改后的例子中，即使有重复的水果名称，通过结合名称和索引，我们也能为每个列表项生成一个唯一的key。这种方法结合了内容和索引的优点，但仍然应该尽量避免使用索引，除非没有更好的选择。

使用中文字符串作为key在技术上并不会出现问题，因为React的key属性是可以接受任何字符串，包括中文字符。在JavaScript中，中文字符串同样被视为有效的字符串，并且可以作为对象的键或者数组元素的唯一标识符。

例如：

const chinesePoets = ['李白', '杜甫', '王维', '白居易'];

const PoetList = () => {
  const listItems = chinesePoets.map(poet => (
    <li key={poet}>{poet}</li>
  ));
  return <ul>{listItems}</ul>;
};

在这个例子中，每个诗人的名字都是唯一的，并且是中文字符串。这些中文字符串可以安全地用作key，React会正确处理它们。

使用filter方法筛选列表项

filter方法可以根据条件筛选出需要渲染的列表项。它会遍历数组中的每个元素，然后对每个元素执行提供的测试函数。如果测试函数返回true，则将该元素包含在返回的新数组中。

技巧：

在渲染之前使用filter方法筛选数据。
结合map和filter方法，先筛选后映射。

示例：

const List = () => {
  const chemists = scientists.filter(scientist => scientist.includes('化学家'));
  const listItems = chemists.map(chemist => <li key={chemist}>{chemist}</li>);
  return <ul>{listItems}</ul>;
};

注意事项：

确保filter方法的回调函数返回布尔值。
仅在需要时使用filter，以避免不必要的性能开销。
filter 同样不会修改原数组，它会返回新数组

正确代码：

const chemists = scientists.filter(scientist => scientist.includes('化学家'));

错误代码：

const chemists = scientists.filter(scientist => {
  return { name: scientist }; // 错误：filter期望返回布尔值
});

使用key属性维护列表状态

key属性帮助React追踪列表中的每个元素，特别是在动态更新列表时。

技巧：

为每个列表项指定一个稳定且唯一的key值。
使用数据中的唯一标识作为key，如ID。

示例：

const scientists = [
  { id: 1, name: '凯瑟琳·约翰逊', field: '数学家' },
  // ...更多科学家
];

const List = () => {
  const listItems = scientists.map(scientist => (
    <li key={scientist.id}>{scientist.name}: {scientist.field}</li>
  ));
  return <ul>{listItems}</ul>;
};

注意事项：

避免使用随机数或时间戳作为key。
当列表项有稳定的唯一ID时，优先使用ID作为key。

正确代码：

<li key={scientist.id}>{scientist.name}</li>

错误代码：

<li key={Math.random()}>{scientist.name}</li> // 错误：key不稳定

记住，正确使用map、filter和key不仅能提升应用的性能，还能避免潜在的bug。掌握这些基础知识，将为你的React开发之路打下坚实的基础。

原文链接：https://juejin.cn/post/7340896627019005988 作者：辰火流光

React基础 第八章（列表渲染map、filter与key）

使用map方法渲染列表

使用filter方法筛选列表项

使用key属性维护列表状态

相关推荐

发表回复

React基础第八章（列表渲染map、filter与key）