4-5、深入了解虚拟DOM
1）react实际实现底层原理（4-4中所讲为了更好的理解虚拟DOM）
- state数据
- JSX模版
- 数据 + 模版生成虚拟DOM（虚拟DOM就是一个JS对象，用它来描述真DOM）（损耗了性能很低，js操作js比DOM操作消耗很低）
- 用虚拟DOM的结构生成真实的DOM来显示
<div id='abc'><span>Hello World</span></div>
['div',{id:'abc'},['span',{},'Hello World']]- state发生变化
- 数据 + 模版生成新的虚拟DOM（极大的提升了性能）
['div',{id:'abc'},['span',{},'bye bye']]- 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中内容（极大的提升了性能）
- 直接操作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
网友评论