遍历数组时要小心！！
一个常见的误解是，使用数组中元素的索引是抑制您可能熟悉的错误的一种可接受的方法：
Each child in an array should have a unique "key" prop.
但是，在许多情况下并非如此！这是反模式，在某些情况下会导致不良行为。
了解key 属性
React 使用 key 属性来理解组件与 DOM 元素的关系，然后将其用于reconciliation process。因此，关键 always 保持 unique 非常重要，否则 React 很有可能会混淆元素并改变不正确的元素。为了保持最佳性能，这些键在所有重新渲染过程中保持静态也很重要。
话虽如此，只要数组是完全静态的，总是需要应用上述内容。但是，我们鼓励尽可能采用最佳做法。
一位 React 开发者在 this GitHub issue 中说：
- key 与性能无关，更多的是关于身份（这反过来会带来更好的性能）。随机分配和变化的值不是身份
- 如果不知道您的数据是如何建模的，我们实际上无法[自动] 提供密钥。如果您没有 id，我建议您使用某种散列函数
- 我们在使用数组时已经有了内部键，但它们是数组中的索引。当您插入一个新元素时，这些键是错误的。
简而言之，key 应该是：
使用 key 属性
根据上面的解释，仔细研究以下示例，并在可能的情况下尝试实施推荐的方法。
不好（可能）
<tbody>
{rows.map((row, i) => {
return <ObjectRow key={i} />;
})}
</tbody>
这可以说是在 React 中迭代数组时最常见的错误。这种方法在技术上并不是“错误”，如果你不知道自己在做什么，它只是......“危险”。如果您正在遍历静态数组，那么这是一种完全有效的方法（例如，导航菜单中的链接数组）。但是，如果您要添加、删除、重新排序或过滤项目，则需要小心。看看官方文档中的这个detailed explanation。
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>
在这个 sn-p 中，我们使用了一个非静态数组，我们并不限制自己将其用作堆栈。这是一种不安全的方法（你会明白为什么）。请注意，当我们将项目添加到数组的开头（基本上是不移位）时，每个 <input> 的值保持不变。为什么？因为key 不能唯一标识每个项目。
换句话说，一开始Item 1 有key={0}。当我们添加第二项时，顶部的项变为Item 2，然后是Item 1作为第二项。然而，现在Item 1 有key={1} 而不是key={0}。相反，Item 2 现在有key={0}！！
因此，React 认为 <input> 元素没有改变，因为带有键 0 的 Item 始终位于顶部！
那么为什么这种方法只是有时不好？
只有在数组以某种方式过滤、重新排列或添加/删除项目时，这种方法才有风险。如果它始终是静态的，那么使用它是完全安全的。例如，像["Home", "Products", "Contact us"] 这样的导航菜单可以安全地使用此方法进行迭代，因为您可能永远不会添加新链接或重新排列它们。
简而言之，此时您可以安全地将索引用作key：
- 数组是静态的，永远不会改变。
- 从不过滤数组（显示数组的子集）。
- 数组永远不会重新排序。
- 数组用作堆栈或 LIFO（后进先出）。换句话说，添加只能在数组的末尾完成（即 push），并且只能删除最后一项（即 pop）。
如果我们在上面的 sn-p 中将添加的项目推到数组的末尾，则每个现有项目的顺序总是正确的。
非常糟糕
<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>
这可以说是best approach，因为它使用的属性对于数据集中的每个项目都是唯一的。例如，如果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 调用），以便仅执行此操作一次，而不是每个组件重新渲染的时间。已经有一些库可以为您提供这样的密钥。这是一个例子：react-key-index。