首先，讓我們回顧一下你是如何用javascript來(lái)轉(zhuǎn)換一個(gè)列表。在下面的代碼中，我們用map函數(shù)來(lái)使得一個(gè)數(shù)字?jǐn)?shù)組中的數(shù)加倍并且將它打印到控制臺(tái)：
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
上面這段代碼將在控制臺(tái)打印出[2，4，6，8，10]，在react中將數(shù)組轉(zhuǎn)化為列表的方法和上面的方法類似。
渲染多個(gè)組件
你可以創(chuàng)建一個(gè)element的集合并把它們包裹在打括號(hào)中，下面的代碼用map函數(shù)將數(shù)組中的數(shù)字全部轉(zhuǎn)換成li元素，最后將它保存到listItems數(shù)組中：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
我們將listItems數(shù)組中的元素插入到ul節(jié)點(diǎn)中，然后將其渲染到dom上：
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
上面的代碼在屏幕上輸出了標(biāo)為1-5的數(shù)字列表。
基本列表組件
通常情況下，你需要在一個(gè)組件中渲染一個(gè)列表，我們可以重寫上面的例子，讓創(chuàng)建的組件接收這個(gè)數(shù)字?jǐn)?shù)組，然后返回一個(gè)無(wú)序列表：
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li>{number}</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
當(dāng)你運(yùn)行上面的代碼時(shí)，會(huì)報(bào)出一串警告：必須為列表的每一個(gè)項(xiàng)目提供關(guān)鍵字key。當(dāng)你創(chuàng)建列表是，必須為每一個(gè)項(xiàng)目指定特殊的key屬性，我們將在下一章節(jié)討論為什么這一點(diǎn)是非常重要的。
我們來(lái)給每一個(gè)列表項(xiàng)目指定關(guān)鍵字以解決上述問題：
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
return (
<ul>{listItems}</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
關(guān)鍵字
關(guān)鍵字可以幫助react確定哪些列表項(xiàng)被改變，添加或者移除。關(guān)鍵字應(yīng)該被指定給列表中的每一項(xiàng)以便它們有一個(gè)確定的ID：
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li key={number.toString()}>
{number}
</li>
);
你通常會(huì)從你的數(shù)據(jù)中獲取ID來(lái)為每一項(xiàng)指定關(guān)鍵字：
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);
如果你沒有一個(gè)確定的ID賦給列表項(xiàng)目的話，你可以使用列表的索引值來(lái)當(dāng)作它的關(guān)鍵字：
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);
如果這些列表項(xiàng)會(huì)被重新排序的話，我們并不建議你使用索引值來(lái)當(dāng)作其關(guān)鍵字，因?yàn)檫@樣會(huì)使得渲染變的緩慢。
基于關(guān)鍵字抽象組件
關(guān)鍵字僅僅在在包裹它的數(shù)組中起作用。比如，如果你抽象出一個(gè)名為L(zhǎng)istItem的組件，你應(yīng)該將關(guān)鍵字添加在ListItem的聲明上，而不是在LIstItem組件中綁定關(guān)鍵字：
- 錯(cuò)誤的用例
function ListItem(props) {
const value = props.value;
return (
// Wrong! There is no need to specify the key here:
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Wrong! The key should have been specified here:
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
- 正確的用例
function ListItem(props) {
// Correct! There is no need to specify the key here:
return <li>{props.value}</li>;
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// Correct! Key should be specified inside the array.
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
** 正確的規(guī)則是在map函數(shù)中綁定關(guān)鍵字 **
一個(gè)列表中的列表項(xiàng)的關(guān)鍵字是唯一的
在一個(gè)列表中，所有列表項(xiàng)的關(guān)鍵字必須是唯一的，當(dāng)然，這僅僅在這個(gè)列表中如此，全局范圍內(nèi)的列表項(xiàng)的關(guān)鍵字不必全都不一樣。我們可以將兩個(gè)相同的關(guān)鍵字用在不同的數(shù)組中：
function Blog(props) {
const sidebar = (
<ul>
{props.posts.map((post) =>
<li key={post.id}>
{post.title}
</li>
)}
</ul>
);
const content = props.posts.map((post) =>
<div key={post.id}>
<h3>{post.title}</h3>
<p>{post.content}</p>
</div>
);
return (
<div>
{sidebar}
<hr />
{content}
</div>
);
}
const posts = [
{id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);
關(guān)鍵字為React提供了一個(gè)追蹤的屬性，你不需要將它傳遞到組件內(nèi)部，如果在你的組件內(nèi)部需要這個(gè)關(guān)鍵字的值，你可以將它賦值給不同的命名變量并通過(guò)prop傳遞到組件內(nèi)部：
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
在上面的例子中，Post組件可以取得props,id的值，但是取不到props.key的值。
在JSX中插入map函數(shù)
在上面的例子中我們定義一個(gè)ListItems的變量并將其插入到JSX中：
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
JSX允許我們將表達(dá)式插入其中，所以我們可以這樣寫：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
有時(shí)候，上面的表達(dá)式是十分簡(jiǎn)潔的，但是也有些許困惑，就像在javascript里面一樣。現(xiàn)在，是使用這種簡(jiǎn)潔的方式呢，還是像前面的代碼一樣將其抽象成一個(gè)變量呢，完全取決于你。還有，若是map函數(shù)中的嵌套的話，將嵌套的東東抽象成一個(gè)組件是很棒的實(shí)踐方式。
