上一章ReactJS实战教程请查看:React使用列表和map()函数
key是唯一的标识符。在React中,它用于识别哪些项已从列表中更改、更新或删除。它在动态创建组件或用户更改列表时非常有用。它还有助于确定需要重新渲染集合中的哪些组件,而不是每次都重新渲染整个组件集。
应该在数组中提供key,以使元素具有稳定的标识,选择key作为惟一标识列表中项的字符串的最佳方法。它可以通过下面的例子来理解。
例子
const stringLists = [ 'AAA', 'BBB', 'CCC', 'DDD', 'EEE' ];
const updatedLists = stringLists.map((strList)=>{
<li key={strList.id}> {strList} </li>;
});
如果渲染的项没有稳定的id,可以将项索引作为key分配给列表。它可以在下面的示例中显示。
例子
const stringLists = [ 'AAA', 'BBB', 'CCC', 'DDD', 'EEE' ];
const updatedLists = stringLists.map((strList, index)=>{
<li key={index}> {strList} </li>;
});
注意:如果key的顺序将来可能改变,不建议使用索引。它会给开发人员带来混乱,并可能导致组件状态的问题。
在组件中使用key
假设你已经为ListItem创建了一个单独的组件,并从该组件中提取了ListItem。在这种情况下,你应该为数组中的<ListItem />元素分配key,而不是为ListItem本身中的<li>元素分配key。为了避免错误,你必须记住,你只在周围数组的上下文中有意义。因此,建议为从map()函数返回的任何内容分配一个key。
示例:不正确的key使用
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
const item = props.item;
return (
// 错误,不需要指定key.
<li key={item.toString()}>
{item}
</li>
);
}
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((strLists) =>
// 这里应该已经指定了key
<ListItem item={strLists} />
);
return (
<div>
<h2>不正确的key使用例子</h2>
<ol>{listItems}</ol>
</div>
);
}
const myLists = [ 'AAA', 'BBB', 'CCC', 'DDD', 'EEE' ];
ReactDOM.render(
<NameList myLists={myLists}/>,
document.getElementById('app')
);
export default App;
在给定的示例中,列表被成功渲染,但是,我们没有为map()迭代器分配一个key,这不是一个好的实践。
示例:正确使用key
要纠正上面的示例,我们应该将key分配给map()迭代器。
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
const item = props.item;
return (
// 这里不需要指定key.
<li> {item} </li>
);
}
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((strLists) =>
// 这里应该制定key.
<ListItem key={myLists.toString()} item={strLists} />
);
return (
<div>
<h2>正确key使用例子</h2>
<ol>{listItems}</ol>
</div>
);
}
const myLists = [ 'AAA', 'BBB', 'CCC', 'DDD', 'EEE' ];
ReactDOM.render(
<NameList myLists={myLists}/>,
document.getElementById('app')
);
export default App;
兄弟key之间的唯一性
我们已经讨论过数组中的key分配在它们的兄弟姐妹之间必须是唯一的。但是,这并不意味着key应该是全局惟一的。我们可以使用相同的一组key来生成两个不同的数组。在下面的例子中可以理解。
例子
import React from 'react';
import ReactDOM from 'react-dom';
function MenuBlog(props) {
const titlebar = (
<ol>
{props.data.map((show) =>
<li key={show.id}>
{show.title}
</li>
)}
</ol>
);
const content = props.data.map((show) =>
<div key={show.id}>
<h3>{show.title}: {show.content}</h3>
</div>
);
return (
<div>
{titlebar}
<hr />
{content}
</div>
);
}
const data = [
{id: 1, title: 'First', content: 'Welcome to srcmini!!'},
{id: 2, title: 'Second', content: 'ReactJS实战教程!!'},
{id: 3, title: 'Third', content: 'ReactJS面试题!!'}
];
ReactDOM.render(
<MenuBlog data={data} />,
document.getElementById('app')
);
export default App;
评论前必须登录!
注册