React之DOM的Diffing算法

Diffing

1.react/vue中的key有什么作用？(key的内部原理是什么？)
！虚拟DOM中key的作用：
(1).key是虚拟DOM对象的标识，再更新显示时key起着重要作用。
(2).当状态中的数据发生变化时，react会根据新数据生成新的虚拟DOM，随后React进行新虚拟DOM和旧虚拟DOM的diff比较：
— 1).旧虚拟DOM中找到了与新虚拟DOM相同的key：若虚拟DOM中内容发生变化则生成新的真实DOM对页面对应DOM进行替换。
— 2).旧虚拟DOM中找不到与新虚拟DOM相通的key：根据数据创建新的真实DOM并渲染到页面。

2.为什么遍历列表时，key最好不要用index？
！用index作为key可能会引发的问题：
(1).若对数据进行：逆序添加、逆序删除等破环顺序操作：会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低。
(2).如果结构中还包含输入类的DOM：会产生错误DOM更新 ==> 界面有问题。
(3).如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。

      class Person extends React.Component{
            state = {
                  persons:[
                        {id:1,name:'小张',age:18},
                        {id:2,name:'小李',age:19}
                  ]
            }
            add = ()=>{
                  const {perons} = 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>
                        <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'))

      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()}</span>
                        </div>
                  )
            }
      }
      ReactDOM.render(<Time />,document.getElementById('test'))