React渲染列表时为何return语句需写在map方法内部？

为什么return必须写在map的回调函数内部 #

这和React本身没有特殊绑定，纯粹是JavaScript原生Array.map()方法的运行机制决定的：

• map从来不是用来单纯遍历数组的方法，它的核心作用是基于原数组生成一个长度完全相同的新数组。新数组每个位置存什么值，完全取决于遍历原数组对应项时，你传入map的回调函数的返回值。
• 如果不在回调里写return，每次回调执行完的默认返回值是undefined，最后map生成的新数组就全是undefined，React识别不了这种无效值，页面上根本渲染不出对应的列表项。

举个最基础的纯JS例子就能搞懂：

const numbers = [1, 2, 3]
const doubledNumbers = numbers.map((num) => {
  // 这里的return就是指定新数组对应位置存什么内容
  return num * 2
})
// 最终得到的doubledNumbers就是 [2, 4, 6]

你贴的React代码逻辑完全一样，只不过回调里return的不是数字，而是写好的JSX结构，本质就是告诉map：遍历到当前这条人员数据时，新数组对应位置就存这个带姓名、邮箱的div节点。

是不是处理每个数组元素时都会执行一次return #

这个理解完全正确。

• map遍历people数组的每一项时，都会单独跑一遍你写的回调逻辑：拿到当前项的person对象，解构出需要的id、firstName、email字段，然后return出填好了当前项数据的JSX节点。
• 等所有元素遍历完，map会把每次return拿到的JSX节点按遍历顺序拼成一个新的React节点数组，React会自动把这个数组里的所有节点批量渲染到页面上，最终你就能看到完整的人员信息列表。

提个新手常踩的坑：别把map和forEach搞混。forEach只做遍历，没有返回值，也不会生成新数组，根本没法直接用来生成React要渲染的列表结构；map正是靠回调里的return收集每个位置的新值，才能组装出符合渲染要求的节点列表。

内容的提问来源于stack exchange，提问作者Data T