react 中 key的作用

前置知识

Diffing算法：

1. 每次做比较的时候最小的“粒度”是标签(节点)；
2. Diffing算法进行对比时是嵌套的；

虚拟DOM中key的作用：

1). 简单的说：key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。
2). 详细的说：当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较：比较规则如下：
a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
(1). 若虚拟DOM中内容没变，直接使用之前的真实DOM
(2). 若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
b. 旧虚拟DOM中未找到与新虚拟DOM相同的key，则根据数据创建的新的真实DOM，随后渲染到页面。

用index作为key可能会引发的问题：

1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作：会产生没有必要的真实DOM更新 ==> 页面效果没问题，但效率低，若数据量过大，则会造成页面卡顿、响应慢。
2. 如果结构中还包含输入类的DOM：会产生错误的DOM更新 ===> 页面有问题。
3. 如果仅是用于渲染列表展示，则可以使用index作为key。
   下面来看一段代码示例：

state = {
    persons: [
      {id: 1, name: '小张', age: 18},
      {id: 2, name: '小李', age: 19},
    ]
  }

  add = () => {
    const { persons } = this.state;
    const p = { id: persons.length + 1, name: '小王', age: 20 };
    this.setState({
      persons: [p, ...persons],
    });
  }
  
  render() {
    return (
      <>
        添加一个小王
        

          {
            this.state.persons.map((ele, index) => {
              return 
{ele.name}---{ele.age}

            })
          }
        
      
    )
  }

正是因为将 key设置为index，导致出现了错误的DOM更新。