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