Vue和React中的Diffing算法

七、DOM的Diffing算法

1. 图示过程

2. 验证Diffing算法

• 简单的案例

  • 项目结构如下图：

    span里面的时间内容每一秒更新，两个input，给input输入框输入东西，input内容不变，时间依然更新，这就是一个Diffing算法的一个小案例

    

    

  • 还可以调出开发者工具显示更新的地方如下图所示：

    更新的部分会持续变颜色，这个就是DOM元素在更新的地方

    

• 代码

  class Time extends React.Component {
    state = { date: new Date() };
  
    componentDidMount() {
      setInterval(() => {
        this.setState({
          date: new Date(),
        });
      }, 1000);
    }
  
    render() {
      return (
        <div>
          <h1>hello</h1>
          <input type="text" />
          <span>
            现在是：{this.state.date.toTimeString()}
            <input type="text" />
          </span>
        </div>
      );
    }
  }
  
  ReactDOM.render(<Time />, document.getElementById("test"));
  

3. key的作用

• react/vue中的key有什么作用？（key的内部原理是什么？）

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

• 为什么遍历列表时，key最好不要用index?

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

    • 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
    • 如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
    • 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，

    ​ 仅用于渲染列表用于展示，使用index作为key是没有问题的。

• 开发中如何选择key?

  • 最好使用每条数据的唯一标识作为key，比如id、手机号、身份证号、学号等唯一值。
  • 如果确定只是简单的展示数据，用index也是可以的。

• 演示代码：

  class Person extends React.Component {
    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 (
        <div>
          <h2>展示人员信息</h2>
          <button onClick={this.add}>添加一个小王</button>
          <h3>使用index（索引值）作为key</h3>
          <ul>
            {this.state.persons.map((personObj, index) => {
              return (
                <li key={index}>
                  {personObj.name}---{personObj.age}
                  <input type="text" />
                </li>
              );
            })}
          </ul>
          <hr />
          <hr />
          <h3>使用id（数据的唯一标识）作为key</h3>
          <ul>
            {this.state.persons.map((personObj) => {
              return (
                <li key={personObj.id}>
                  {personObj.name}---{personObj.age}
                  <input type="text" />
                </li>
              );
            })}
          </ul>
        </div>
      );
    }
  }
  
  ReactDOM.render(<Person />, document.getElementById("test"));