本文深入探讨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 元素的数组来完成列表渲染。
处理嵌套数据列表
当数据结构是嵌套数组时，例如 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>
);
});
})
}在这个示例中：
- 外层的 map((mentionYear, yearIndex) => { ... }) 遍历 mentions 数组中的每个 mentionYear 数组。
- 对于每个 mentionYear 数组，我们首先使用 filter() 进行筛选。
- 然后，我们再次使用 map((mention, mentionIndex) => { ... }) 将筛选后的 mention 对象转换为 <li> JSX 元素。
- 外层 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 列表渲染高效且无误。
