React keys
keys是唯一的标识符。在React中，它用于标识哪些项目已更改，更新或从列表中删除。当我们动态创建组件或用户更改列表时，这很有用。它还有助于确定需要重新呈现集合中的哪些组件，而不是每次都重新呈现整个组件集。
应该在数组内部提供keys，以使元素具有稳定的标识。选择keys作为唯一标识列表中项目的字符串的最佳方法。通过以下示例可以理解。
示例
const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ];
const updatedLists = stringLists.map((strList)=>{
<li key={strList.id}> {strList} </li>;
});
如果呈现的项目没有稳定的ID，则可以将项目索引分配为列表的keys。可以在下面的示例中显示。
示例
const stringLists = [ 'Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa' ];
const updatedLists = stringLists.map((strList, index)=>{
<li key={index}> {strList} </li>;
});
注意: 如果将来项目的顺序可能会更改，建议不要使用索引作为keys。这会给开发人员造成混乱，并可能导致组件状态出现问题。
将keys与组件一起使用
考虑到您已经为 ListItem 创建了一个单独的组件，并从该组件中提取了ListItem。在这种情况下，您应该在数组的
元素上分配keys，而不是在ListItem本身的
元素上分配keys。为避免错误，您必须记住，keys仅在周围数组的上下文中才有意义。因此，建议您从map()函数返回的任何内容都分配一个密钥。
示例: 错误的密钥用法
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
const item = props.item;
return (
// Wrong! No need to specify the key here.
<li key={item.toString()}>
{item}
</li>
);
}
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((strLists) =>
// The key should have been specified here.
<ListItem item={strLists} />
);
return (
<div>
<h2>Incorrect Key Usage Example</h2>
<ol>{listItems}</ol>
</div>
);
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
<NameList myLists={myLists}/>,
document.getElementById('app')
);
export default App;
在给定的示例中，列表已成功呈现。但是，我们没有为map()迭代器分配密钥不是一个好习惯。
输出
示例: 正确的keys用法
要更正上面的示例，我们必须将keys分配给Map()迭代器。
import React from 'react';
import ReactDOM from 'react-dom';
function ListItem(props) {
const item = props.item;
return (
// No need to specify the key here.
<li> {item} </li>
);
}
function NameList(props) {
const myLists = props.myLists;
const listItems = myLists.map((strLists) =>
// The key should have been specified here.
<ListItem key={myLists.toString()} item={strLists} />
);
return (
<div>
<h2>Correct Key Usage Example</h2>
<ol>{listItems}</ol>
</div>
);
}
const myLists = ['Peter', 'Sachin', 'Kevin', 'Dhoni', 'Alisa'];
ReactDOM.render(
<NameList myLists={myLists}/>,
document.getElementById('app')
);
export default App;
输出
唯一性兄弟姐妹之间的keys
我们已经讨论了数组的keys分配在他们的兄弟姐妹中必须唯一。但是，这并不意味着keys应该全局是唯一的。我们可以在生成两个不同的数组时使用同一组keys。在下面的示例中可以理解。
示例
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 lidihuo!!'},
{id: 2, title: 'Second', content: 'It is the best ReactJS Tutorial!!'},
{id: 3, title: 'Third', content: 'Here, you can learn all the ReactJS topics!!'}
];
ReactDOM.render(
<MenuBlog data={data} />,
document.getElementById('app')
);
export default App;
输出
