javascript - React官网示例中，关于遍历渲染的部分，这个怎么理解呢？

Question

React的官网示例，有不明白的地方请教各位，希望能得到解惑。

const people = [  '凯瑟琳·约翰逊: 数学家',  '马里奥·莫利纳: 化学家',  '穆罕默德·阿卜杜勒·萨拉姆: 物理学家',  '珀西·莱温·朱利亚: 化学家',  '苏布拉马尼扬·钱德拉塞卡: 天体物理学家',];export default function List() {  const listItems = people.map(person =>    <li>{person}</li>  );  return <ul>{listItems}</ul>;}

官网地址：https://react.docschina.org/learn/rendering-lists
问题1：{listItems}如果listItems是一个函数，我还能理解，可是这是个变量，看起来有点像数组变量，又有点不像，没有返回值啊。难道{}这个大括号就能输出自动遍历数组了？
问题2：<li>{person}</li>，为什么前面没有return,也没有大括号包裹。
这种jsx语法看上去有点像js，但是又有点离谱。

尝试搜索很多资料了

Answer 1

{}中的变量支持下面的类型

type ReactNode =        | ReactElement        | string        | number        | Iterable<ReactNode>        | ReactPortal        | boolean        | null        | undefined        | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES[            keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_REACT_NODES        ];

Answer 2

你的那个文档 在往下看看呢
return 只是被省略了 并不是没有

Answer 3

问题1：{listItems} 并不是直接输出数组，而是将数组中的每个元素作为子元素传递给 <ul> 组件。在 React 中，当你尝试将一个数组（或其他可迭代对象）作为子元素传递给一个组件时，React 会自动遍历这个数组，并为每个元素创建一个新的子组件。这就是所谓的“隐式映射”（implicit mapping）。所以，{listItems} 实际上是在告诉 React：“请为 listItems 数组中的每个元素创建一个 <li> 元素”。

问题2：在 JSX 语法中，当箭头函数的主体只有一个表达式时，你可以省略大括号和 return 关键字。这是 ES6（ECMAScript 2015）中的一个特性，被称为“箭头函数表达式简写”（arrow function expression shorthand）。因此，<li>{person}</li> 等价于 <li>{() => person}</li>，但由于函数体只有一个表达式 person，所以可以简写为 <li>{person}</li>。

JSX 语法是 React 的一种语法扩展，它看起来像是 HTML，但实际上是 JavaScript。JSX 允许你在 JavaScript 代码中写 HTML 标记，这使得组件的渲染更加直观和易读。然而，JSX 并不是必需的；你也可以完全使用普通的 JavaScript 函数和对象来创建 React 组件。但是，使用 JSX 通常会使代码更加简洁和易于理解。

总的来说，React 通过其组件化和声明式编程模型，使得处理列表渲染这类任务变得非常直观和简单。你只需要定义好数据（在这个例子中是 people 数组）和渲染逻辑（在这个例子中是 List 组件），React 就会负责高效地更新和渲染 UI。