React中key属性的原理解析及作用

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，但是，我们举例出现的情况依然会出现。