理解 react 官网遍历渲染示例

react 官网示例中，关于遍历渲染的部分存在一些疑问。我们逐一探讨以下问题：

问题 1：{listitems} 是个数组变量，如何理解？

{listitems} 是 javascript 中使用 map 数组方法创建的数组变量。它包含数组中每个元素的表示形式。在 react jsx 中，大括号 {} 用来表示 javascript 表达式，因此 {listitems} 实际上代表 <li>{person}</li> 表达式的集合。

问题 2：<li>{person}</li> 中为什么缺少 return 和大括号？

在 react jsx 中，<li>{person}</li> 这样的表达式是一个快捷语法，本质上它是对以下代码的语法糖：

return (
  <li>{person}</li>
);

因此，<li>{person}</li> 等价于一个返回单个 li 元素的函数。