深入理解React数组渲染及JSX语法
React官方文档中关于数组渲染的示例，引发了对JSX语法和数组处理机制的讨论。该示例的核心在于如何使用map函数高效渲染数组数据，并结合JSX的特性简洁地实现列表渲染。
示例代码如下：
const people = [
'凯瑟琳·约翰逊: 数学家',
'马里奥·莫利纳: 化学家',
'穆罕默德·阿卜杜勒·萨拉姆: 物理学家',
'珀西·莱温·朱利亚: 化学家',
'苏布拉马尼扬·钱德拉塞卡: 天体物理学家',
];
export default function list() {
const listitems = people.map(person => <li>{person}</li>);
return <ul>{listitems}</ul>;
}
关键点在于{listitems}和<li>{person}</li>是如何工作的：
-
people.map()函数: 该函数遍历people数组，对每个元素person执行回调函数。回调函数person => <li>{person}</li>是一个箭头函数，它隐式地返回一个<li>元素，其中包含person的值。 -
隐式返回: 箭头函数的简写形式
person => <li>{person}</li>等价于：
person => {
return <li>{person}</li>;
}
如果箭头函数只有一条语句，可以省略return语句和花括号。
-
listitems变量:people.map()函数的返回值是一个新的数组listitems，其中包含多个<li>元素。 -
JSX数组渲染: 在JSX中，
{listitems}可以直接渲染listitems数组。React会自动遍历该数组，并将数组中的每个<li>元素渲染到<ul></ul>列表中。
因此，该示例利用了map函数的简洁性和JSX自动处理数组的能力，以一种优雅的方式实现了数组的遍历渲染。 map函数生成<li>元素数组，JSX引擎自动遍历并渲染，最终呈现一个有序列表。
