React JSX 列表渲染：深入理解 map 与 forEach 的关键差异

本文深入探讨react jsx中列表渲染时`map`与`foreach`的关键区别。当需要将数组元素转换为可渲染的jsx组件时，必须使用`map`方法，因为它会返回一个新数组供react渲染。`foreach`仅用于执行副作用，不返回可渲染的值，导致元素无法显示。文章通过代码示例详细阐述正确实践，尤其适用于处理嵌套数据。

React 中列表渲染基础

在 React 中，我们经常需要根据数据集合动态生成一系列 UI 元素，例如列表、表格行等。JSX 语法允许我们在组件的 render 方法或函数组件中直接嵌入 JavaScript 表达式。对于数组数据，最常用的方式是使用数组的 map() 方法。map() 方法会遍历数组中的每个元素，并对每个元素执行一个回调函数，然后将回调函数的返回值组成一个新的数组。React 能够识别这个由 JSX 元素组成的新数组，并将其渲染到 DOM 中。

例如，渲染一个简单的项目列表：

<ul>
  {
    this.state.searchQuery &&
    this.props.searchDB.projects
      .filter((project) => {
        if (this.state.searchQuery === '' || this.state.searchQuery === null) {
          return project;
        } else if (project.projectName.toLowerCase().includes(this.state.searchQuery.toLowerCase())) {
          return project;
        }
        return null;
      })
      .map((project, index) => {
        return (
          <li key={'project_' + index}>
            {index + '_' + project.projectName}
          </li>
        );
      })
  }
</ul>

上述代码中，filter() 方法筛选出符合条件的项目，然后 map() 方法将每个项目对象转换为一个 <li> JSX 元素。最终，map() 返回一个 <li> 元素的数组，React 能够正确地渲染它们。

forEach 与 map：核心差异

在 JavaScript 中，Array.prototype.forEach() 和 Array.prototype.map() 都是遍历数组的方法，但它们之间存在一个关键的区别，这对于 React 列表渲染至关重要。

forEach 的局限性

forEach() 方法为数组的每个元素执行一次提供的回调函数。它的主要目的是执行副作用，例如修改外部变量、打印日志等。forEach() 方法不返回任何值（或者说，它的返回值为 undefined）。

在 JSX 中，如果你尝试使用 forEach() 来生成元素：

{
  this.state.searchQuery &&
  this.props.searchDB.mentions.forEach((mentionYear) => {
    mentionYear.filter((mention) => {
      if (this.state.searchQuery === '' || this.state.searchQuery === null) {
        return mention;
      } else if (mention.mentionTitle.toLowerCase().includes(this.state.searchQuery.toLowerCase())) {
        return mention;
      }
      return null;
    }).map((mention, mentionIndex) => {
      console.log(mention.mentionTitle); // 数据被正确打印
      // 这里的 JSX 元素被创建了，但它们的返回值被 forEach 丢弃了！
      return (
        <li key={'project_' + mentionIndex}>
          {mentionIndex + '_' + mention.mentionTitle}
        </li>
      );
    });
  });
}

尽管 console.log(mention.mentionTitle) 能够正确打印数据，表明 filter() 和 map() 内部逻辑都正常执行，但因为外层的 forEach() 方法不返回任何值，所以它最终提供给 React 的是一个 undefined。React 无法渲染 undefined，因此没有任何 <li> 元素被呈现在页面上。

map 的正确用法

与 forEach() 不同，map() 方法会创建一个新数组，其元素是调用数组中的每个元素执行回调函数后的结果。这意味着 map() 方法会返回一个新数组，这个新数组的元素就是你在回调函数中返回的 JSX 元素。 React 正是需要这样一个 JSX 元素的数组来完成列表渲染。

飞书多维表格

表格形态的AI工作流搭建工具，支持批量化的AI创作与分析任务，接入DeepSeek R1满血版

26

查看详情

处理嵌套数据列表

当数据结构是嵌套数组时，例如 this.props.searchDB.mentions 可能是一个包含年份数组，每个年份数组又包含多个 mention 对象，我们需要连续使用 map() 方法来处理。

// 假设 this.props.searchDB.mentions 是一个类似 [[m1, m2], [m3, m4]] 的结构
{
  this.state.searchQuery &&
  this.props.searchDB.mentions.map((mentionYear, yearIndex) => { // 第一次 map 遍历年份数组
    return mentionYear
      .filter((mention) => { // 过滤每个年份内的 mention
        if (this.state.searchQuery === '' || this.state.searchQuery === null) {
          return mention;
        } else if (mention.mentionTitle.toLowerCase().includes(this.state.searchQuery.toLowerCase())) {
          return mention;
        }
        return null;
      })
      .map((mention, mentionIndex) => { // 第二次 map 转换 mention 为 JSX
        return (
          <li key={`year_${yearIndex}_mention_${mentionIndex}`}>
            {mentionIndex + '_' + mention.mentionTitle}
          </li>
        );
      });
  })
}

在这个示例中：

1. 外层的 map((mentionYear, yearIndex) => { ... }) 遍历 mentions 数组中的每个 mentionYear 数组。
2. 对于每个 mentionYear 数组，我们首先使用 filter() 进行筛选。
3. 然后，我们再次使用 map((mention, mentionIndex) => { ... }) 将筛选后的 mention 对象转换为 <li> JSX 元素。
4. 外层 map 的回调函数返回的是一个由 <li> 元素组成的新数组。最终，整个表达式将返回一个由多个 <li> 元素数组组成的大数组，React 能够扁平化并正确渲染它们。

关键点与注意事项

key 属性的重要性

在渲染列表时，为每个列表项提供一个稳定且唯一的 key 属性至关重要。React 使用 key 来识别哪些项已更改、添加或删除。这有助于 React 高效地更新 UI，并保持组件状态。

• 唯一性： key 在同级元素中必须是唯一的。
• 稳定性： key 应该是数据项的唯一标识符，不应在重新渲染时发生变化。避免使用数组索引作为 key，除非列表项的顺序和数量永不改变，因为这可能导致性能问题或不正确的组件状态。
• 在上述示例中，我们使用了 key={'project_' + index} 和 key={year_${yearIndex}mention${mentionIndex}}，这在没有更稳定 ID 的情况下是可接受的，但如果数据对象本身有唯一 ID（如project.id），则应优先使用project.id`。

何时使用 forEach

forEach() 并非一无是处，它在需要执行副作用但不需要生成新数组的场景下非常有用。例如：

• 遍历数组并打印每个元素。
• 遍历数组并修改数组中对象的属性（如果对象是引用类型）。
• 触发某些外部操作，如发送日志到服务器。

但在 JSX 内部，当你的目标是生成一个可渲染的元素列表时，map() 始终是正确的选择。

总结

在 React JSX 中进行列表渲染时，理解 map() 和 forEach() 的根本区别至关重要。map() 方法返回一个新数组，其中包含转换后的 JSX 元素，这是 React 渲染列表所必需的。而 forEach() 仅用于执行副作用，不返回任何值，因此不能用于直接生成 JSX 元素。遵循这一原则，并正确处理嵌套数据和 key 属性，将确保你的 React 列表渲染高效且无误。

以上就是React JSX 列表渲染：深入理解 map 与 forEach 的关键差异的详细内容，更多请关注php中文网其它相关文章！