前言：在原生JS中，通常用 JavaScript 的 map() 方法来创建列表
一、一些学习笔记
1.列表（Lists）、建（Keys）
举个菜鸟React例子挺好理解：使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表:
以下举例输出结果都相同：
可以将以上实例重构成一个组件，组件接收数组参数，每个列表元素分配一个 key。Keys 可以在 DOM 中的某些元素被增加或删除的时候帮助 React 识别哪些元素发生了变化。因此应当给数组中的每一个元素赋予一个确定的标识，比如：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
一个元素的 key 最好是这个元素在列表中拥有的一个独一无二的字符串。通常使用来自数据的 id 作为元素的 key ：
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
当元素没有确定的 id 时，你可以使用他的***索引 index 作为 key（只有在没有确定ID时使用）：
const todoItems = todos.map((todo, index) =>
<li key={index}>
{todo.text}
</li>
);
用keys提取组件例子：
key 只有在它和它的兄弟节点对比时才有意义。比如提取出一个ListItem组件，应该把key保存在数组中的这个<ListItem /> 元素上，而不是放在 ListItem 组件中的 <li> 元素上。举个例子ListItem和NumberList互为兄弟节点：
function ListItem(props) {
// 注意！这里不需要指定key:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 注意！key应该在数组的上下文中被指定
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);
元素的 key 在他的兄弟元素之间应该唯一：组元素中使用的 key 在其兄弟之间应该是独一无二的。然而，它们不需要是全局唯一的。当我们生成两个不同的数组时，我们可以使用相同的键，如下：
function ListItem(props) {
// 注意！这里不需要指定key:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 注意！key应该在数组的上下文中被指定
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('example')
);
2.JSX（{}）
在 JSX中嵌入 map()：
在上面的例子中声明了一个单独的 listItems 变量并将其包含在 JSX 中（JSX 的使用是大括号-------{}）:
<ul>
{listItems}
</ul>
JSX 允许在大括号中嵌入任何表达式，所以我们可以在 map() 中这样使用：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
//JSX大括号内
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
注意：
（1）JSX的{} 中不能出现var,const,let等这种关键字，举个例子：
var ListItem = (props) => {
return <li>{props.value}</li>;
}
function NumberList(props) {
var numbers; //声明在外面是因为 {} 中不能出现var,const,let等这种关键字
return (
<ul>
{
numbers = props.numbers, //注意这里要加逗号
numbers.map((number) =>
<ListItem key={number}
value={number} />
)}
</ul>
);
}
var arr = [1,2,3]; //要传递的参数
ReactDOM.render(
<NumberList numbers={arr}/>, //这里的numbers就是props下的numbers,即props.numbers
document.all('example')
);
（2）JSX 中不能使用 if else 语句，但可以使用 三元运算表达式来替代
ReactDOM.render(
<div>
<h1>{i == 1 ? 'True!' : 'False'}</h1>
</div>
,
document.getElementById('example')
);//如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.
（3）JSX 允许在模板中插入数组，数组会自动展开所有成员：
var arr = [
<h1>我是你爸</h1>,
<h2>你是我儿子！</h2>,
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('example')
);//输出结果：我是你爸
你是我儿子！