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

版权声明:欢迎转载,转载请注明原始出处 https://blog.csdn.net/xiaomingelv/article/details/86560003

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

没有更多推荐了,返回首页