React官方文档学习记录(五)- List和Keys

这个list和keys我真的不知道应该怎么翻译呢

一点点记录,建议需要学习React的移步官方文档去学习。

在下面的例子中,我们使用map()这个函数对数组中的值double,我们将新数组用doubled存储,并且输出它。

1
2
3
const numbers = [1,2,3,4,5,6];
const doubled = numbers.map( (number)=> number*2);
console.log(doubled);

渲染多个组件

这里不想解释了,代码肯定看得懂的,主要就是在React渲染中要用{}包裹一下元素

1
2
3
4
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
<li>{number}</li>
);

1
2
3
4
5
ReactDOM.render(
//就是下面这行,记得使用大括号。
<ul>{listItems}</ul>,
document.getElementById('root')
);

基础的列表组件

我们可以对上述代码进行重构,将numbers作为props传入,之后输出一个list,里面都是元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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')
);

但是这里请注意,你会得到一个报错,对于列表元素,一个关键值(key)(这里我不知道正确的翻译是怎么样的)”key”是一个特殊的字符串属性,你需要在创建列表元素时包含。接下来我们会讲到为什么这么重要。

keyerror报错

那么让我们修一下bug!指定一个key

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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识别哪一个项被修改,被添加或者是被删除。它用于给数组中的每个元素一项一个特定的身份识别。

选取一个可以将每个列表项都独特地和自己的兄弟们区分的key来作为字符串属性是非常好的~你大部分的时候都会使用ID作为key来区分你的数据。就像这样:

1
2
3
4
5
const todoItems = todos.map((todo) =>
<li key={todo.id}>
{todo.text}
</li>
);

最不济的情况下,如果你没有给每个要被渲染的项指定一个独特的ID的话,你可以使用它在数组中的index,就像这样:

1
2
3
4
5
6
const todoItems = todos.map((todo, index) =>
// Only do this if items have no stable IDs
<li key={index}>
{todo.text}
</li>
);

但是不建议使用index作为key的哦~

用key来拆分组件

在数组周围的上下文(in the context of the surrounding array)里,keys才起作用。

不要太过于细分key,当你使用的是A组件,然后B组件是A中使用的,但是每个渲染中大概主要区分的还是A,所以你只需要给A指定key,而没有必要给B设定key

这是错误写法:
wrong

下面的是正确写法:
correct

这里使用了图片,感觉这样比较直观吧

独特性

keys在数组中的兄弟项中一定需要是独一无二的,但是它们不需要在全局也仍然是独一无二的。(这个应该很好理解,就像是全局变量和局部变量。

keyunique

keys只是作为React中的一个暗示(hint),它们不会真正地传给你的组件,当你需要用这同样的数据的时候,需要用一个新的命名来存储这些数据。

1
2
3
4
5
6
const content = posts.map((post) =>
<Post
key={post.id}
id={post.id}
title={post.title} />
);

在JSX中嵌入map()

原本我们是这样写的:

1
2
3
4
5
6
7
8
9
10
11
12
13
function NumberList(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}

但是我们可以在JSX中嵌入map(),就像这样:

1
2
3
4
5
6
7
8
9
10
11
12
function NumberList(props) {
const numbers = props.numbers;
return (
<ul>
{numbers.map((number) =>
<ListItem key={number.toString()}
value={number} />
)}
</ul>
);
}

但是请注意,如果map()函数中包含的内容过多,请考虑一下拆分组件。