系列文章目录
第一章：React从入门到进阶之初识React
第一章：React从入门到进阶之JSX简介
第三章：React从入门到进阶之元素渲染
第四章：React从入门到进阶之JSX虚拟DOM渲染为真实DOM的原理和步骤
第五章：React从入门到进阶之组件化开发及Props属性传值
第六章：React从入门到进阶之state及组件的生命周期
第七章：React从入门到进阶之React事件处理
第八章：React从入门到进阶之React条件渲染
第九章：React从入门到进阶之React中的列表与key
一、列表元素的渲染
- 在日常开发中，难免会遇到页面需要展示列表的需求，不管是只有一列还是多列数据，都是一堆结构相同内容不同的数据。在传统的html中有table元素可以显示多列表格，有ul>li可以显示多行单列的列表数据。
- 在真实项目中，我们前端页面上所展示的数据都是来key源于我们的后端，后端会为我们提供一些API，然后这些API返回的结果通常就是存有多条业务数据的数组，然后我们再利用JavaScript代码通过循环将数组中的数据处理后与html元素结合，渲染到页面上最终呈现给用户
- 那么在React中，把数组转换为元素列表的过程与JavaScript是一样的，我们也可以通过JavaScript代码与JSX标签相结合来渲染数据列表
- 在React中我们可以通过使用{}在JSX内构建一个元素集合
- 我们可以利用JavaScript中数组的map方法来遍历数组，并将数组中的每个元素与JSX的li标签结合，最后渲染到页面上
假如后端给我们返回来一个人员名单数组，要求我们把数组中的人名全部以列表的形式展示在页面上，下面我们就来实现一下这个需求
//我们定义一个userList来模拟后台返回的数据
const userList = ["Alvin","Yinnes","Shenhuinan","Louyaqian","Yaolu","Yuyueping"];
const listItems = userList.map(user => {
return <li>{
user}</li>
});
ReactDOM.render(
<ul>{
listItems }<ul/>,
document.getElementById('root')
);
二、列表组件的封装
上述代码运行完后，就会在页面上展示出所有人的名字了
但是在真实项目开发中，我们不可能直接把代码随意写成这样，一般我们都会把不同的业务逻辑封装成组件，这样既便于维护也方便复用
接下来我们就把上面的代码封装成一个独立的组件UserList
function UserList(props){
const users = props.users;
const listItems = users.map(user => {
return <li>{
user}</li>
});
return <ul>{
listItems}</ul>;
}
//我们定义一个userList来模拟后台返回的数据
const userList = ["Alvin","Yinnes","Shenhuinan","Louyaqian","Yaolu","Yuyueping"];
ReactDOM.render(
<UserList users={
userList} />,
document.getElementById('root')
);
这样我们就简单的实现了一个列表组件了
但是当我们运行这段代码时，会发现控制台中会弹出一堆的警告信息：a key should be provided for list items，意思就是：我们应该为每个列表项提供一个key，也就是说当我们创建一个元素时，必须要包括一个特殊的key属性，关于key的更多信息，我们将会在详细介绍。
我们先把当前这个例子中的每个li加上这个特殊的key属性解决warning问题
function UserList(props){
const users = props.users;
const listItems = users.map((user,index) => {
return <li key={
user+index}>{
user}</li>//我们把用户名加上当前用户在数组中的索引作为key给li
});
return <ul>{
listItems}</ul>;
}
//我们定义一个userList来模拟后台返回的数据
const userList = ["Alvin","Yinnes","Shenhuinan","Louyaqian","Yaolu","Yuyueping"];
ReactDOM.render(
<UserList users={
userList} />,
document.getElementById('root')
);
这样就不会再报warning了
接下来我们再来看一下这个key是干嘛用的，为什么要加上一个key属性呢？
三、元素的key属性
那么key是什么，为什么要使用key呢
- 当页面元素发生变化时，key可以帮助React识别哪些元素改变了，比如添加或者删除。
- 另外，当React在进行新旧DOM元素对比时，也会利用元素的key属性来进行匹配对比，这样会大大提高渲染效率
- 因此我们应该给列表中的每个元素赋予一个确定的标识
- 一个元素的key最好是这个元素在列表中独一无二的字符，也就是说key的值应该是唯一的。一般情况下，我们使用数据的id来作为元素的key值
- 当元素没有确定的id的时候，万不得已的情况下可以使用元素的索引来作为key（墙裂不推荐），因为这样做可能会导致性能变差，甚至还会引起组件的状态问题
下面来看两段设置key的代码示例
- 利用数据的id作为属性key值
const userList = [{
id:1, name:"Alvin"},{
id:2, name:"Yinnes"},{
id:3, name:"Shenhuinan"},{
id:4, name:"Louyaqian"},{
id:5, name:"Yaolu"},{
id:6, name:"Yuyueping"}];
const listItems = userList.map(user => {
return <li key={
user.id}>{
user.name}</li>
});
- 利用索引作为key属性
const userList = ["Alvin","Yinnes","Shenhuinan","Louyaqian","Yaolu","Yuyueping"];
const listItems = userList.map((user,index) => {
return <li key={
index}>{
user}</li>
});
四、设置key属性的一般原则
元素的 key 只有放在就近的数组上下文中才有意义。比如说，如果你提取出一个 ListItem 组件，你应该把 key 保留在数组中的这个 < ListItem /> 元素上，而不是放在 ListItem 组件中的 < li> 元素上。
- 例子：不正确的使用 key 的方式
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')
);
总结：一般情况，一个好的经验法则是：需要循环输出的元素需要设置key属性，也就是说应该给循环中的元素添加key属性，比如在上面的例子中，我们应该给map方法中的元素设置key属性
五、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')
);
key 会传递信息给 React ，但不会传递给我们的组件。如果我们想要在组件中使用 key 属性的值，那么需要用其他属性名（非key）显式传递这个值。比如在下面的代码中，我们可以通过props获取到Post组件的id和title属性，但是无法获取到key属性。
const content = posts.map((post) =>
<Post
key={
post.id}//无法通过props获取
id={
post.id}//可以通过props获取
title={
post.title} />//可以通过props获取
);
六、在JSX中使用map()
上面的例子中我们都是把map和JSX元素单独分开写的，实际上还可以在{}中使用map函数，因为JSX允许在大括号中嵌入任何表达式，如下代码：
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{
numbers.map((number) =>
<ListItem key={
number.toString()}
value={
number} />
)}
</ul>
);
}
关于列表元素和key的使用就介绍到这里
下一章节我们将介绍一下React中的表单以及受控组件和非受控组件