React 和 native js 中的 map 方法答案

【问题标题】：Map method in React and native jsReact 和 native js 中的 map 方法
【发布时间】：2022-11-17 04:21:38
【问题描述】：

我无法理解 map 方法在 React 中的工作原理。在 javascript 中，地图返回一个新数组并且不迭代，为什么在 React 中它是循环元素

【问题讨论】：

“在 javascript 中，map 返回一个新数组并且不迭代”这是错误的，map 方法确实返回一个新数组，但这样做肯定会遍历当前数组。 “为什么在 React 中它是循环元素”不知道这是什么意思，我已经使用 React 十年了。请发布一些代码来说明您的问题。

【解决方案1】：

map 方法确实在 Javascript 中迭代数组。它也恰好返回一个新数组，其元素是使用传递给 map 的回调函数构建的，该回调函数作用于原始数组的每个元素。

例如：

let arr = [1, 2, 3, 4]

console.log(arr.map(num => num + 1)) 


===> [2, 3, 4, 5]

它的工作方式与forEach 完全一样，但它不是简单地迭代，而是返回一个新数组。

您还可以使用 map 来制作数组的浅表副本：

let arr = [1, 2, 3, 4] 
let arrCopy = arr.map(num => num)

console.log(arrCopy)


===> [1, 2, 3, 4]

因此，为什么在 React 中使用 map 构建元素数组很容易：

let names = ["Mark", "Kelly", "Mike"]

return (
  <ol>
    {names.map(name => {
      return (
        <li>{name}</li>
      )})}
  </ol>
)

【讨论】：

map 函数正在遍历名称数组，是的。 map 函数遍历每个元素，将每个元素传递给匿名函数，匿名函数返回我们的名称，并在该名称周围包含一些 li 标记。然后整个map 函数返回给我们所有这些创建的li 元素的数组。

【解决方案2】：

在 React 中，如果你提供一个元素数组，它会渲染它们，所以使用 map 我们得到一个新的元素数组，它足以让 JSX 渲染。

例如：

export function App() {
  return <div className='App'>{[<b>hello</b>, <h2>word</h2>]}</div>;
}

它会将元素呈现为

<div className='App'>
  <b>hello</b>
  <h2>word</h2>
</div>

【讨论】：