1). 虛擬DOM是什么?
一個虛擬DOM(元素)是一個一般的js對象, 準確的說是一個對象樹(倒立的)
虛擬DOM保存了真實DOM的層次關(guān)系和一些基本屬性，與真實DOM一一對應(yīng)
如果只是更新虛擬DOM, 頁面是不會重繪的
2). Virtual DOM 算法的基本步驟
用JS對象樹表示DOM樹的結(jié)構(gòu)；然后用這個樹構(gòu)建一個真正的DOM樹插到文檔當中
當狀態(tài)變更的時候，重新構(gòu)造一棵新的對象樹。然后用新的樹和舊的樹進行比較，記錄兩棵樹差異
把差異應(yīng)用到真實DOM樹上，視圖就更新了
3). 進一步理解
Virtual DOM 本質(zhì)上就是在 JS 和 DOM 之間做了一個緩存。
可以類比 CPU 和硬盤，既然硬盤這么慢，我們就在它們之間加個緩存：既然 DOM 這么慢，我們就在它們 JS 和 DOM 之間加個緩存。CPU（JS）只操作內(nèi)存（Virtual DOM），最后的時候再把變更寫入硬盤（DOM）。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>04_component</title>
</head>
<body>
<div id="example"></div>
<br>
<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
/*
驗證:
虛擬DOM+DOM Diff算法: 最小化頁面重繪
*/
class HelloWorld extends React.Component {
constructor(props) {
super(props)
this.state = {
date: new Date()
}
}
componentDidMount () {
setInterval(() => {
this.setState({
date: new Date()
})
}, 1000)
}
render () {
console.log('render()')
return (
<p>
Hello, <input type="text" placeholder="Your name here"/>!
<span>It is {this.state.date.toTimeString()}</span>
</p>
)
}
}
ReactDOM.render(
<HelloWorld/>,
document.getElementById('example')
)
</script>
</body>
</html>
