react里的key，加不加key，到底有啥不一样？图例+代码说明

大家好，我是梅巴哥er ，本篇介绍的是react里的key。

key的作用：

• 提高状态的更新效率，减少不必要的DOM操作
• 方便识别出是哪些状态在变化。

key的位置：

• 放在map生成的第一li或div标签里

key的值：

• 一般是元素的id值

下面以图例+代码的形式，来直观展示key的作用。

首先，先来看一下没有key的效果：

import React, { Component } from 'react'

class App3 extends Component {
    constructor(props) {
        super(props) 
        this.state = {
            list: [
                {id: 1, value: '值1'},
                {id: 2, value: '值2'},
                {id: 3, value: '值3'}
            ]
        }
    }
    handleClick = () => {
        this.setState({
            list: [
                {id: 4, value: '值4'},
                {id: 1, value: '值1'},
                {id: 2, value: '值2'},
                {id: 3, value: '值3'}
            ]
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                    点击↓
                </button>
                <ul>
                    {
                        this.state.list.map((v) => {
                            return (
                            // 这里没有设置key值
                                <li>
                                    { v.value }
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default App3 

打开F12，点击按钮，看下运行的效果图：

看右侧代码，发现当点击按钮时，右侧4个li都发生了变化。说白了，就是原来的3个li，删除了，然后把这4个又重新生成了一遍。

再来看下设置了key值的效果：

import React, { Component } from 'react'

class App3 extends Component {
    constructor(props) {
        super(props) 
        this.state = {
            list: [
                {id: 1, value: '值1'},
                {id: 2, value: '值2'},
                {id: 3, value: '值3'}
            ]
        }
    }
    handleClick = () => {
        this.setState({
            list: [
                {id: 4, value: '值4'},
                {id: 1, value: '值1'},
                {id: 2, value: '值2'},
                {id: 3, value: '值3'}
            ]
        })
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>
                    点击↓
                </button>
                <ul>
                    {
                        this.state.list.map((v) => {
                            return (
                            // 这里设置了key值
                                <li key={ v.id }>
                                    { v.value }
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default App3 

打开F12，点击按钮，看下代码的变化：

看右侧代码，点击按钮的时候，只有新增的li发生了变化，原来3个li都没有发生变化。