您可以在百度里搜索“深入浅出React和Redux 艾草文学(www.321553.xyz)”查找最新章节！

　　5.2.2 Key的用法

　　React不会使用一个O（N2）时间复杂度的算法去找出前后两列子组件的差别，默认情况下，在React的眼里，确定每一个组件在组件序列中的唯一标识就是它的位置，所以它也完全不懂哪些子组件实际上并没有改变，为了让React更加“聪明”，就需要开发者提供一点帮助。

　　如果在代码中明确地告诉React每个组件的唯一标识，就可以帮助React在处理这个问题时聪明很多，告诉React每个组件“身份证号”的途径就是key属性。

　　假如让待办事项列表用JSX表示的代码如下：

　　前面代码的区别是每个TodoItem增加了名为key的prop，而且每个key是这个TodoItem实例的唯一id，当新的待办事项列表变成下面这样的时候，React的处理方式也会不一样，现在第一位增加一个TodoItem实例，我们给他一个唯一的key值0，代码如下：

　　React根据key值，可以知道现在的第二和第三个TodoItem实例其实就是之前的第一和第二个实例，所以React就会把新创建的TodoItem实例插在第一位，对于原有的两个TodoItem实例只用原有的props来启动更新过程，这样shouldComponentUpdate就会发生作用，避免无谓的更新操作。

　　庆幸的是，React会提醒开发者不要忘记使用key，同类型子组件出现多个实例时如果没有key的话，React在运行时会给出警告，例如，在Todo应用中，我们把TodoList中关于key的那一行删掉，让每个TodoItem都没有key属性，JSX代码如下：

　　id={item.id}

　　text={item.text}

　　completed={item.completed}

　　/>

　　在浏览器的Console中就可以看见如下所示的错误警告，提示开发者在TodoList中不要忘了使用key：

　　理解了key属性的作用，也就知道，在一列子组件中，每个子组件的key值必须唯一，不然就没有帮助React区分各个组件的身份，这并不是一个很难的问题，一般很容易给每个组件找到一个唯一的id。

　　但是这个key值只是唯一还不足够，这个key值还需要是稳定不变的，试想，如果key值虽然能够在每个时刻都唯一，但是变来变去，那么就会误导React做出错误判断，甚至导致错误的渲染结果。

　　如果通过数组来产生一组子组件，一个常见的错误就是将元素在数组中的下标值作为key，下面的代码是错误的例子：

　　{

　　todos.map((item, index) => (

　　key={index}

　　text={item.text}

　　completed={item.completed}

　　/>

　　))

　　}

　　这么做非常危险，因为，假如没有使用key的话React会在运行时输出一个错误提示，但是错误地使用key值React就不会给出错误提示了，因为React无法发现开发者的错误。

　　用数组下标作为key，看起来key值是唯一的，但是却不是稳定不变的，随着todos数组值的不同，同样一个TodoItem实例在不同的更新过程中在数组中的下标完全可能不同，把下标当做key就让React彻底乱套了。

　　需要注意，虽然key是一个prop，但是接受key的组件并不能读取到key的值，因为key和ref是React保留的两个特殊prop，并没有预期让组件直接访问。 深入浅出React和Redux