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。