React核心概念:列表&keys
引言
首先让我们来回顾以下怎么在JavaScript中转换列表。
在下面的代码中,我们使用map()
函数让数组中的每一个数字乘2。在这之后我们将通过map()
返回的新数组赋值给doubled
并将其打印出来:
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map((number) => number * 2);
console.log(doubled);
打印出来的是[2, 4, 6, 8, 10]
。
在React中,将数组转换成列表与此是几乎相同的。
渲染多个组件
你可以使用{}
在JSX内构建一个元素集合
。
在下面的例子中我们通过map()
函数遍历numbers
,把每一个元素添加到<li>
中,并将返回的结果数组赋值给listItems
。
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);
之后我们将整个listItems
包裹在<ul>
中,并将它渲染到DOM上。
ReactDOM.render(
<ul>{listItems}</ul>,
document.getElementById('root')
);
上述代码在页面上展示了1到5的数字列表。
基础列表组件
通常我们需要在组件中渲染列表。
我们可以把上面的代码重构成一个接收数组并输出元素列表的组件。
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')
);
但是当你运行这段代码时会看到一个警告信息a key should be provided for list items
。意思是需要在创建列表时为每一个元素添加key
属性,至于为什么需要key
将在下一节讲解。
让我们在numbers.map()
中给每一个元素赋予一个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')
);
keys
keys使得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时,不到万不得已,你不能使用数组的下标作为key:
const todoItems = todos.map((todo, index) =>
// 只有没有确定的id时才能这么做
<li key={index}>
{todo.text}
</li>
);
由于数组元素的顺序是可变的,所以我们不推荐使用下标作为key。使用下标作为key可能会导致性能问题甚至还可能引起组件状态问题。可以看看这篇深度解析使用下标作为key的负面影响。如果你不显式地给元素添加key,那么React会默认地为每一个元素添加数组下标作为key。
如果想要更深入地了解key,可以看深度解析key的重要性这篇文章。
用key提取组件
keys只有放在同一数组的上下文中才有意义。
如果你提取了一个ListItem
组件,那么你应该把可以放在数组的元素<ListItem />
上而不是ListItem组件内部的<li>
上。
反例
function ListItem(props) {
const value = props.value;
return (
// 错误!不需要在这里使用key:
<li key={value.toString()}>
{value}
</li>
);
}
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
// 错误!key应该在这里被声明:
<ListItem value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}
const numbers = [1, 2, 3, 4, 5];
ReactDOM.render(
<NumberList numbers={numbers} />,
document.getElementById('root')
);
使用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('root')
);
一个简单的记忆方法:凡是在map()中的元素都需要key。
Keys在兄弟节点之间必须是唯一的
在数组中使用的key必须是唯一的,但是key不需要是全局唯一。当我们创建不同的列表时我们可以使用相同的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 learning React!'},
{id: 2, title: 'Installation', content: 'You can install React from npm.'}
];
ReactDOM.render(
<Blog posts={posts} />,
document.getElementById('root')
);
在React中,key仅仅作为一个提示不会作为prop传递给组件。如果组件需要一个与key相同的值,那么需要另起一个prop显式地传递。
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);
在上面的代码中,Post组件可以读取props.id
但无法读取props.key
。
在JSX中嵌入map()
在上面的例子中,我们单独声明了变量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允许在{}
中嵌入表达式,所以我们可以内联map()
的结果:
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}
有时候这样更加简介,但是这种方式也可能会被滥用。就像JavaScript一样,是否提取变量取决于你认为怎样代码的可读性更高。如果map()
函数中的代码太过复杂,那么就把它提取成组件吧。
上一节:条件渲染
下一节:表单