遍历数组时要小心！！
一个常见的误解是，使用数组中元素的索引是抑制您可能熟悉的错误的可接受方法：
Each child in an array should have a unique "key" prop.
但是，在许多情况下不是！这是一种反模式，在某些情况下可能导致不良行为。
了解key道具
React使用该key道具来了解组件与DOM元素的关系，然后将其用于对帐过程。因此，密钥始终保持唯一性非常重要，否则React很有可能会混淆元素并变异不正确的元素。同样重要的是，这些键在所有重新渲染过程中都应保持静态，以保持最佳性能。
就是说，只要知道阵列是完全静态的，就不必总是应用上述方法。但是，在可能的情况下，鼓励采用最佳实践。
一个React开发人员在GitHub问题中说：
- 关键不在于性能，而在于身份（反过来又可以带来更好的性能）。随机分配且变化的值不是身份
- 在不知道数据建模方式的情况下，我们无法现实地[自动]提供密钥。我建议如果您没有ID，也许使用某种哈希函数
- 使用数组时，我们已经具有内部键，但是它们是数组中的索引。当您插入新元素时，这些键是错误的。
简而言之，a key应该是：
- 唯一 -密钥不能与兄弟组件的密钥相同。
- 静态 -关键不应在渲染之间更改。
使用key道具
根据上述说明，请仔细研究以下示例，并在可能的情况下尝试实施推荐的方法。
不好（可能）
<tbody>
{rows.map((row, i) => {
return <ObjectRow key={i} />;
})}
</tbody>
可以说这是在React中遍历数组时最常见的错误。从技术上讲，这种方法不是“错误”的，只是如果您不知道自己在做什么，则是“危险”。如果要遍历静态数组，则这是一种完全有效的方法（例如，导航菜单中的链接数组）。但是，如果要添加，删除，重新排序或过滤项目，则需要小心。请看一下官方文档中的详细说明。
class MyApp extends React.Component {
constructor() {
super();
this.state = {
arr: ["Item 1"]
}
}
click = () => {
this.setState({
arr: ['Item ' + (this.state.arr.length+1)].concat(this.state.arr),
});
}
render() {
return(
<div>
<button onClick={this.click}>Add</button>
<ul>
{this.state.arr.map(
(item, i) => <Item key={i} text={"Item " + i}>{item + " "}</Item>
)}
</ul>
</div>
);
}
}
const Item = (props) => {
return (
<li>
<label>{props.children}</label>
<input value={props.text} />
</li>
);
}
ReactDOM.render(<MyApp />, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
在此代码段中，我们使用的是非静态数组，我们并不仅限于将其用作堆栈。这是一种不安全的方法（您会明白为什么）。请注意，当我们将项目添加到数组的开头（基本上不移位）时，每个项目的值都<input>保持不变。为什么？因为key不能唯一地标识每个项目。
换句话说，首先Item 1具有key={0}。当我们添加第二个项目时，最上面的项目变成Item 2，然后Item 1是第二个项目。但是，现在Item 1已经key={1}没有key={0}了。相反，Item 2现在有key={0}！
因此，React认为<input>元素没有改变，因为Itemwith键0始终位于顶部！
那么，为什么这种方法有时只是不好的呢？
仅当以某种方式过滤，重新排列或添加/删除项目时，此方法才有风险。如果它始终是静态的，则使用起来绝对安全。例如，["Home", "Products", "Contact us"]可以使用此方法安全地迭代诸如这样的导航菜单，因为您可能永远不会添加新链接或重新排列它们。
简而言之，这里是您可以安全地将索引用作key：
- 该数组是静态的，永远不会改变。
- 永远不会过滤数组（显示数组的子集）。
- 阵列永远不会重新排序。
- 该阵列用作堆栈或LIFO（后进先出）。换句话说，添加只能在数组的末尾进行（即推入），而只有最后一项可以被删除（即弹出）。
相反，如果我们在上面的代码段中将添加的项目推到数组的末尾，则每个现有项目的顺序将始终是正确的。
很坏
<tbody>
{rows.map((row) => {
return <ObjectRow key={Math.random()} />;
})}
</tbody>
尽管此方法可能会保证键的唯一性，但即使不需要时，也会始终强制做出反应以重新呈现列表中的每个项目。这是一个非常糟糕的解决方案，因为它会极大地影响性能。更不用说在Math.random()两次产生相同数字的事件中不能排除按键碰撞的可能性。
不稳定的键（如由产生的键Math.random()）将导致不必要地重新创建许多组件实例和DOM节点，这可能导致性能下降和子组件中的状态丢失。
很好
<tbody>
{rows.map((row) => {
return <ObjectRow key={row.uniqueId} />;
})}
</tbody>
可以说这是最好的方法，因为它使用的属性对于数据集中的每个项目都是唯一的。例如，如果rows包含从数据库中获取的数据，则可以使用表的主键（通常是一个自动递增的数字）。
挑选键的最佳方法是使用一个字符串，该字符串唯一地标识其同级项中的列表项。通常，您会将数据中的ID用作密钥
好
componentWillMount() {
let rows = this.props.rows.map(item => {
return {uid: SomeLibrary.generateUniqueID(), value: item};
});
}
...
<tbody>
{rows.map((row) => {
return <ObjectRow key={row.uid} />;
})}
</tbody>
这也是一个好方法。如果您的数据集不包含任何保证唯一性的数据（例如，任意数字的数组），则可能会发生键冲突。在这种情况下，最好在迭代之前为数据集中的每个项目手动生成唯一的标识符。最好在安装组件时或在接收到数据集时（例如，props从异步API调用或从异步API调用接收到），以便仅执行一次，而不是每次组件都重新渲染。已经有少数可以为您提供此类密钥的库。这是一个示例：react-key-index。
key属性。它将帮助ReactJS查找对适当DOM节点的引用，并仅更新标记内的内容，而不重新渲染整个表/行。