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樹

轉載于:https://www.cnblogs.com/yangxueyou/articles/9875054.html