react学习笔记-深入理解虚拟DOM（3）

4-5、深入了解虚拟DOM

1）react实际实现底层原理（4-4中所讲为了更好的理解虚拟DOM）

1. state数据
2. JSX模版
3. 数据 + 模版生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真DOM）（损耗了性能很低，js操作js比DOM操作消耗很低）
4. 用虚拟DOM的结构生成真实的DOM来显示
   <div id='abc'><span>Hello World</span></div>
   ['div',{id:'abc'},['span',{},'Hello World']]
5. state发生变化
6. 数据 + 模版生成新的虚拟DOM（极大的提升了性能）
   ['div',{id:'abc'},['span',{},'bye bye']]
7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容（极大的提升了性能）
8. 直接操作DOM，改变span中的内容

优点：

• 性能提升了
• 它使得跨端应用得以实现，React Native

2）虚拟DOM实现过程

// JSX -> createElement -> 虚拟DOM（JS对象） -> 真实的DOM
render () {
return (<div>item</div>)
}
相当于
return React.createElement('div',{},'item')

4-6、虚拟DOM中的Diff算法

比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容（极大的提升了性能）
Diff（diffrence）算法

图1

• 把多次setState结合成一次setState进行，减少虚拟DOM比对次数

图2

• 同层比对，如果某一层不满足，则该层下方都不会重新比对，直接废弃掉，用新的DOM替换旧的DOM

  
  图3
• 确保key值的唯一性，使用索引在修改过数据后可能存在对应不上的情况，应使用item或唯一标示id等作为key值

4-7、React中ref的使用

<input
onChange={(e)=>this.handleInputChange('inputValue',e)}
ref={(input) => {this.input = input}}
/>

handleInputChange (key,e) {
console.log(e.target,key,this.input)
const value = e.target.value
// const value = this.input.value
// setState是异步执行函数
this.setState(()=>({
[key]: value
}), () => {
console.log(this.ul.querySelectorAll('div').length,this.state.inputValue)
})
}

• handleInputChange函数中的e.target等价于ref定义的this.input