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

本文主要是介绍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