diffing算法以及key值的作用

Posted 2021-08-26 老张在线敲代码

在react/vue中key有什么作用？内部原理是什么？

一.虚拟dom中key的作用

简单的来说key就是虚拟dom对象中的标识，在更新显示时key有很重要的作用

原理：当状态中的数据发生改变的时候，react会根据【新数据】生成新的虚拟dom，随后react会将旧虚拟dom与新虚拟dom进行diff对比

二.对比规则的俩种场景：

1.旧的虚拟dom中找到了跟新的虚拟dom中一样的key：

（1）如果虚拟dom中的内容没变，则直接使用之前的真实dom
（2）如果虚拟dom中内容发生改变了，则生成新的真实dom，随后替换掉页面
中之前的真实dom

2.旧的虚拟dom中没有找到与新的虚拟dom一样的key 根据数据创建新的虚拟dom，随后渲染生成到页面上

三.用index作为key值会引发的问题：

1.如果数据进行逆序添加等破环顺序的操作会产生没有必要的真实dom更新，虽然页面效果没问题但是效率降低

2.如果结构中还包含输入类的dom，则会产生错误的dom更新

3.如果只是用于渲染列表，页面展示key使用index是没有任何问题的

四.下面是一个小栗子：

import React, { Component } from "react";

class Diff extends Component {
  state = {
    person: [
      { id: 1, name: "小张", age: 22 },
      { id: 2, name: "小袁", age: 21 },
    ],
  };
  add = () => {
    const { person } = this.state;
    if (person.length === 2) {
      var p = { id: person.length + 1, name: "小王", age: "19" };
    } else {
      return false;
    }
    this.setState({
      person: [p, ...person],
    });
  };
  render() {
    return (
      <div>
        <h2>人员信息展示:</h2>
        <button onClick={this.add}>添加一个小王</button>
        <ul>
          {this.state.person.map((item) => {
            return (
              <li key={item.id}>
                {item.name}---{item.age}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

export default Diff;