Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of `Test`. See https://fb.me/react-warning-keys for more information.
我们在使用react的过程中,大家或多或少都遇到过这样的警告,这个警告是用来提醒开发者,在react中,需要对遍历渲染的组件添加key属性。所以接下来,我们就来聊聊key属性的作用及原理。
import React, {Component} from 'react';
class Test extends Component {
constructor(props) {
super(props);
this.state = {
testArray: [{text: '组件1', id: 'a'}, {text: '组件2', id: 'b'}, {text: '组件3', id: 'c'}, {text: '组件4', id: 'd'}]
}
}
//修改state打乱顺序
sort(){
this.setState({
testArray: [{text: '组件1', id: 'a'}, {text: '组件3', id: 'c'}, {text: '组件2', id: 'b'}, {text: '组件4', id: 'd'}]
})
}
render() {
return <div>
<div>不指定key属性</div>
<ul>
{
this.state.testArray.map((item) => {
return <li ><span>{item.text}</span><input/></li>
})
}
</ul>
<div>指定key属性</div>
<ul>
{
this.state.testArray.map((item) => {
return <li key={item.id}><span>{item.text}</span><input/></li>
})
}
</ul>
<button onClick={::this.sort}>打乱排序</button>
</div>
}
}
export default Test
代码一眼便知。我们做一个小实验,通过同一个数组testArray来渲染两个不同的列表,一个列表项指定了key属性,另一个不指定key属性,然后我们观察他们打乱前后的运行结果。
打乱顺序前,在input中填入内容
打乱顺序后
这里可以看出,在打乱顺序后,有无指定key属性运行结果的异同点。相同的是,每一个项的input中的value都得到了保留。不同的是,如果我们不指定key属性,列表中的标题和input在在打乱顺序之后,出现了对不上号的情况,那么,是什么原因造成的呢?
接下来我们简单了解一下react的diff算法策略。在react中,为了提升渲染效率,在内部维持了一个虚拟dom,当更新渲染dom时,又会产生一个新的虚拟dom,这时新旧虚拟dom会先用diff算法先进行一次对比,计算出实际更新部分,然后再对实际的更新部分进行渲染到真实dom结构中。
在react中key属性的使用,则涉及到diff算法中同级节点的对比策略,当我们指定key值时,key值会作为当前组件的id,diff算法会根据这个id来进行匹配对比。如果遍历新的虚拟dom结构时,发现组件的id在旧的dom结构中存在,那么react会认为当前组件只是位置发生了变化,因此不会将旧的组件销毁重新创建,只会改变当前组件的位置,然后再检查组件的属性有没有发生变化,然后选择保留或修改当前组件的属性,因此我们可以发现如果我们指定唯一的key,如果只是打乱了数据源,数据源渲染出来的每一个子组件都是整体数据发生变化,而如果不显式指定key值,结果好像有点出乎我们的意料。
如果没有显性的指定key值,会发生什么事情呢?其实,如果没有显性指定的话,react会把当前组件的数据源的index作为默认的key值。那么,这样会造成什么样的后果呢?我们以第二项作为例子来看,由于我们没有显示指定key,则key值默认为index。当我们打乱数据的顺序后,数据源的第二项由{text: '组件2', id: 'b'}变成了{text: '组件3', id: 'c'},这时候执行diff算法时,发现key值为1的组件在旧的虚拟dom结构中存在,并且组组件的位置还是原来的位置,所以就直接保留了原组件,但是组件的标题属性已经改变了,接着,修改组件的属性,然后渲染。于是,我们就看到了,输入框没有发生变化,但是标题变了,很显然,这个结果不是我们的本意。而如果我们显性指定了唯一的key值,依然以第二项作为例子,执行diff算法时,发现第二项的组件变化了并且在旧的虚拟dom结构中存在,于是将旧的dom中的第三项移动到了第二项,接着检查属性是否发生了变化,渲染,最终出现的结果。是整体的顺序发生变化。
所以,在实际开发中,我们需要注意的点是什么呢?
首先,要确保key值的唯一,如果事实上key值如果不唯一的话,react只会渲染第一个,剩下的react会认为是同一项,直接忽略。
其次,尽量避免使用index值作为组建的key值,虽然显性使用index作为key,可以消除warning,但是,我们举例出现的情况依然会出现。