リストのループ処理
- Reactではリストのループ処理で複数のコンポーネントを生成するとき、その要素にkeyを与えるべきである。
- 仮想DOMが変更を検知して、最小限の変更で実際のDOMに反映するのに使われる。パフォーマンスがよくなる。
- 並べ替えが想定されるリストの場合、リストのindexをkeyにしてはいけない
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")
);
-
keyが意味を持つのは、それを取り囲んでいる配列の側の文脈です。
function ListItem(props) {
return (
// ここでkeyを指定しても意味がない
<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("root")
);
- keyは兄弟要素の中で一意であればよい
全体でユニークである必要はない
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 lerning React!"},
{id: 2, title: "Installation", content: "You can install React from npm."}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById("root")
);
mapのインライン化
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}