React--》虚拟DOM与Diff算法

React更新视图的思想是只要state变化就重新渲染视图，而组件只有一个DOM元素需要更新时，也得把整个组件内容重新渲染到页面上吗？我们的理想状态是，只更新变化的地方，而React能做到部分更新吗？答案是可以的，需要借助虚拟DOM配合Diff算法来实现。

虚拟DOM：本质上就是一个JS对象，用来描述你希望在屏幕上看到的内容(UI，即HTML结构)

Diff算法的执行过程

初次渲染时，React会根据初始state(Model)，创建一个虚拟DOM对象(树)，根据虚拟DOM生成真正的DOM，渲染到页面中。

当数据变化后(setState() )，重新根据新的数据，创建新的虚拟DOM对象(树)，与上一次得到的虚拟DOM对象，使用Diff算法对比(找不同)，得到需要的新的内容。

举个例子来验证Diff算法的存在，如下：

import React from 'react';
import ReactDOM from 'react-dom';

class App 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(<App />,document.getElementById('root'))

我们设置了一个时间函数，并且在每次页面重新创建完成渲染到页面上，我们在渲染时间的外层放置了一个input，在内层也放置了input，如果不存在diff算法，按理来说我们在input输入内容的时候页面也会被重新渲染更新的，真实的情况怎么样呢？我们来看：

可以看到diff算法会逐层对比，找到应该渲染的那个标签进行渲染。

虚拟DOM中key的作用

key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。

当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】 ,随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下:

旧虚拟DOM中找到了与新虚拟DOM相同的key

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

旧虚拟DOM中未找到与新虚拟DOM相同的key
根据数据创建新的真实DOM，随后渲染到到页面

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

若对数据进行：逆序添加、逆序删除等破坏顺序操作。会产生没有必要的真实DOM更新=>界面效果没问题，但效率低。

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  state = {
    persons:[
      {id:1,name:'小张',age:18},
      {id:2,name:'小李',age:20}
    ]
  }
  addPerson = ()=>{
    const {persons} = this.state
    const p = {id:persons.length+1,name:'小王',age:30}
    this.setState({persons:[p,...persons]})
  }
  render(){
    return (
      <div>
        <h2>展示人员信息</h2>
        <button onClick={this.addPerson}>添加一个小王</button>
        <ul>
          {
            this.state.persons.map((personObj,index)=>{
              return <li key={index}>{personObj.name}--{personObj.age}</li>
            })
          }
        </ul>
      </div>
    )
  }
}
ReactDOM.render(<App />,document.getElementById('root'))

/* 
  使用index索引值作为key
  初始数据:
    {id: 1,name : "小张" ,age:18},
    {id: 2,name : "小李" , age:19},
  初始的虚拟DOM:
    <li key=0>小张---18</li>
    <li key=1>小李---19</li>

  更新后的数据:
    {id: 3,name : "小王" ,age:20},
    {id: 1,name : "小张" ,age:18},
    {id: 2,name : "小李" ,age:19},
  更新数檐后的虚拟DOM:
  <li key=0>小王---20</li>
  <li key=1>小张---18</li>
  <li key=2>小李---19</li>
*/

如果结构中还包含输入类的DOM。会产生错误DOM更新=>界面有问题。

/* 
  使用id唯一标识作为key
  初始数据:
    {id: 1,name : "小张" ,age:18},
    {id: 2,name : "小李" , age:19},
  初始的虚拟DOM:
    <li key=0>小张---18<input type="text" /></li>
    <li key=1>小李---19<input type="text" /></li>

  更新后的数据:
    {id: 3,name : "小王" ,age:20},
    {id: 1,name : "小张" ,age:18},
    {id: 2,name : "小李" ,age:19},
  更新数檐后的虚拟DOM:
  <li key=0>小王---20<input type="text" /></li>
  <li key=1>小张---18<input type="text" /></li>
  <li key=2>小李---19<input type="text" /></li>
*/

注意：如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

我们在开发中应该如何选择key？

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