forEach() 方法在 React 中的应用

现代 ES6 版本的 JavaScript 的引入为我们带来了许多有用的特性。 .forEach() 方法只是一个例子。

就像你可能从名称中猜到的那样，.forEach() 方法对数组中的每个项目执行回调函数。这样做是为了以一种或另一种方式转换数组中的每个项目。

在 React 中，我们经常根据列表来渲染组件。例如，拥有用户名列表并需要将每个用户名显示为段落的情况并不少见。

在此过程中，你还可以通过其他方式转换它们，例如将它们大写。

JSX 中的元素到元素的数组项

JSX 是一种熟悉的类似 HTML 的语法，它减少了构建组件的工作量。最终，用 JSX 编写的代码编译成一组复杂的 React.createElement() 方法调用。

要在 JSX 中使用 .forEach() 或其他 JavaScript 方法，你必须将表达式放在大括号之间。这对于让 React 知道将花括号之间的所有内容都视为常规 JavaScript 是必要的。

React 中的 .forEach()

在纯 JavaScript 中，.forEach() 对于更改每个数组项非常有用。

如果你尝试基于 React 中的列表来呈现组件，那么它的用处不大。React 开发人员不使用 .forEach() 渲染组件的原因有很多。

如果要使用花括号基于列表呈现多个组件，则花括号之间的表达式应返回组件列表。

如果你尝试为此目的使用 .forEach()，你会发现没有任何渲染。发生这种情况是因为 .forEach() 返回未定义。

从本质上讲，.forEach() 并非旨在返回值。它的主要目的是转换每个数组元素，但仅此而已。该方法不返回新数组；它返回 undefined。

相反，React 开发人员使用另一种方法，.map()。

.map() 作为替代方案

ES6 还引入了 .map() 方法，它更适合基于列表渲染组件。

与 .forEach() 一样，它接受一个参数 - 一个指定如何转换数组中每个项目的函数。然而，与 .forEach() 不同的是，map 方法会保留原始数组并返回一个包含转换后项目的新数组。

这正是基于数组渲染多个组件所需要的。

让我们看一个示例：

class App extends Component {
  render() {
    return <div>{[1,2,3].map(number => <h1>{number}</h1>)}</div>;
  }
}

在这个例子中，我们得到了一个数字数组，我们用 .map() 创建一个新数组。新数组包含三个 <h1> 元素以及原始数组中的三个数值。

当使用 .map() 方法时，给每个新元素一个不同的 key 属性也是一个好主意。React 使用 key 值来识别唯一元素。

以下是遵循此模式后上述代码块的外观：

class App extends Component {
  render() {
    return <div>{[1,2,3].map(number => <h1 key={number}>{number}</h1>)}</div>;
  }
}

由于我们数组中的数字是唯一的，我们可以将它们的值用作 key。