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的使用过程中，大家或多或少都会遇到过这样的警告，这个警告是提醒开发者，需要对渲染的组件添加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中先用diff算法先进行一次对比，将所有的差异化解决之后，再一次性根据虚拟dom的变化，渲染到真实的dom结构中。

而key属性的使用，则涉及到diff算法中同级节点的对比策略，当我们指定key值时，key值会作为当前组件的id，diff算法会根据这个id来进行匹配。如果遍历新的dom结构时，发现组件的id在旧的dom结构中存在，那么react会认为当前组件只是位置发生了变化，因此不会将旧的组件销毁重新创建，只会改变当前组件的位置，然后再检查组件的属性有没有发生变化，然后选择保留或修改当前组件的属性，因此我们可以发现如果我们指定了唯一的key值，如果只是打乱了数据源，数据源渲染出来的每一个子组件都是整体数据发生变化，而如果不显式指定key值，结果好像有点出乎我们的意料。

那么，如果没有显式指定key值，会发生什么事情呢？其实，如果没有显式指定，react会把当前组件数据源的index作为默认的key值，那么，这时候会发生什么事呢？我们以第二项作为例子，由于我们没有显式指定key值，key值会被默认指定为index，也就是1。当我们打乱了数据的顺序，数据源的第二项由{text: '组件2', id: 'b'}变成了{text: '组件3', id: 'c'}，这时候执行diff算法时，发现key值为1的组件在旧的dom结构中存在，并且组件的位置还是原来的位置，所以，直接保留了原组件，但是组件的标题属性已经改变了，接着，修改组件的属性，渲染，于是，我们就看到了，输入框没改变，但是标题变了，很显然，这个结果，有时候并不是我们的本意。而如果我们显式指定了唯一的key值，依旧以第二项作为例子，执行diff算法时，发现第二项的组件变化了并且新的组件在旧的dom结构中存在，于是将第三项整体移动到第二项，然后检查属性有没有发生变化，渲染，最终出现的结果，就是整体的顺序改变了。

因此，在实际开发使用中，我们需要注意什么呢？

首先，我们要确保key值的唯一，事实上如果key值不唯一的话，react只会渲染第一个，剩下的react会认为是同一项，直接忽略。其次，尽量避免使用index值作为组件的key值，虽然显式使用index作为key值可以消除warning，但是，我们举例出现的情况依旧会出现。

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

猜你喜欢