大家好，我是梅巴哥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都没有发生变化。