react —— diff算法与VDOM

###################  鸡汤一碗  ########################

与其担心未来，不如现在好好努力。

这条路上，只由奋斗才能给你安全感。

不要轻易把梦想寄托在某个人身上，也不要太在乎身旁的耳语，

因为未来是你自己的，只有你自己才能给你自己最大的安全感。

###########################################

diff 算法 保留节点 ，减少复杂度。diff算法遵循以下原则

1. 同层级对比原则。

div->p 删掉重新创建

div key=1 -> div key=2 删掉重新创建

<Child1> -> <Child2> 组件名不同删除重新创建

2. 列表设置key (item.id)
[0,1,4,5]
a b c d

[0,1,8,4,5]
a b e c d

3. 同class 名的 component
<div>
<child1></child1>
<child2></child2>
<child3></child3>
</div>

<div>
<child1></child1>
<child2></child2>
<child4></child4>
</div>
render(){

if(this.state.isShow){
return <Home/>
}else{
return <Child/>
}

}

4. 合并操作(批量操作)

this.setState({
count:this.state.count+1
})
this.setState({
a:this.state.count+1
})
this.setState({
b:this.state.count+1
})

// this.setState({
// count:///,
// a,
// b,
// })
// 
// this.setState({
// name:"kerwin"
// })

// this.setState({
// name:"xiaoming"
// })

// this.setState({
// name:"kerwin"
// })
// 
5. 选择性子树渲染 
shouldComponentUpdate

return false 
return true

// {
// name：'kerwin',
// key:1
// chidlren:[
// {
// name:'11',
// chidlren:[

// ]
// }
// ],
// }

// {
// name：'kerwin',
// key:1
// chidlren:[
// {
// name:'22',
// chidlren:[

// ]
// }
// ],
// }

 

js的v8引擎，执行效率非常高

dom渲染的时候用webkit引擎——dom树然后在到渲染树

 

########################VDOM##############################

虚拟dom：创建新的虚拟dom，对比旧的虚拟dom，然后以最小的代价来更新dom树