React 列表渲染之 key 属性
在 React 组件开发中，经常会遇到列表渲染，最简单列表渲染就是在 ul 标签中渲染任意多个 li 标签。React 中可以通过对数组数据进行遍历，为数组中每一个数据生成 li 标签。
在 React 中列表渲染用的较多的方法是数组的 map()方法，map()方法接收一个回调函数，这个回调函数的参数是调用 map 方法的数组中的每一项值及其下标，map 方法将数组中的每一项都执行回调，并返回一个回调产生的新数组，React 中就是通过这个原理进行列表渲染，对数组调用 map 方法，生成一个包含相应数据的 li 标签数组，最后将生成的 li 数组写到 ul 标签中，通过 render 渲染出来，就是一个列表了，列表中的每一项的数据就是数组中每一项的数据。
但是，在这个地方有一个特别需要注意的，那就是别忘了在 map 方法中给 li 标签添加在当前列表中的唯一标识 key 属性，如果忘记了加 key 属性，那么编译运行时浏览器会报错。对于给 key 绑定什么值是有讲究的，不能想都不想就给 key 绑定数组 index 下标，因为很多时候设置 key ＝ index 会有潜在的 bug，因为在数组中，每个值对应的下标并不是一成不变的，如果你的列表中会对列表项进行拖拽换位、删除、插入等会重排数组的动态操作时，将 index 作为 key 值会为你的项目带来许多麻烦，这些 bug 有时是很难被发现的，如果你在进行一个大的项目开发的话，因为很多时候这种 index 错乱造成的 key 值错乱并不会报错，但却会使你的项目趋于瘫痪。
为了避免不必要的麻烦，建议最好总是为每个列表项的 key 属性绑定唯一的不会再变化的标识值，例如元素的 id 属性等。如果你并没有给每个列表项设置 id 属性，或者觉得那样太麻烦，那么你可以对你的列表做以下分析:
你的列表和列表项是否是静态的，即确定你的列表和列表项不是通过其他值计算而来，并且生成出来之后也不会再变动。
没有给每个项指定 id 等永久性唯一性标识。
确保你的列表不会再重排或者被拿来遍历过滤，即保证列表数据的数组中每个值的下标不再被改变。
如果你的列表满足上面三个条件，你可以考虑用 index 作为列表项的 key 值，但这并不能完全保证万无一失，也许还会有其他的潜在危险，但这是目前我了解到的关于列表渲染中 key 值的影响了。
如果有需要可以查看文章react 中用 index 做 key 值的潜在风险，本文是基于阅读这篇文章之后，根据自己的理解写的，相信对你在列表渲染的 key 值理解上会很有帮助。