## 前言 本文節選《react全棧》虛擬dom部分，適合react還在入門階段的讀者。 建議閱讀時間：20-30min。 ## dom理解 Dom稱為文檔對象模型，相信大家都看過一本js Dom編程藝術，會把文檔轉為樹類型的數據結構，稱為dom tree .每一片樹葉被稱為節點，瀏覽器會提供給一系列的api給js，讓他有可以操作dom的能力。 ## 引入虛擬dom的緣由 由于spa項目越來越多，導致dom結構會越來越復雜，因為會有越來越多的封裝組件出來，很多時候開發者覺得很簡單的一個下拉框實際可能由原生的一個select演變成了至少10個標簽，為了支持它的樣式以及復雜功能，而在這部分變得大量使用的時候，會產生的量的非常規的基于整體頁面的懸浮dom,根據offset去定位，在這些元素的變化、功能支持的時候會導致大量的回流，從而影響性能 ### 虛擬元素 虛擬元素并不是屬于react的部分，其是屬于與react搭配的技術棧，基于的原點是原生的dom結構表示很復雜，包含非常多的api方法，而這些我們可以通過js的數據結構部分來控制，能夠表述的非常簡單，而且可以通過對數據結構的分析來避免某些低效的dom操作變化。 在虛擬元素完成diff之后，會把確定的虛擬元素渲染到最終的dom視圖上。Dom結構是這樣的 : ~~~ var element ={ tagName :’div’, attr:{ props:{ id:’', index:'' }, styles:{ color:red; font-size:12px }, }, children :{ // codes like the upper codes } } ~~~ 用構造函數模擬一下 ~~~ function Element (tagname,attr,children){ this.tagName = tagname this.props= props this.children =children } var headline = new Element("h1",null,’hello world') var div=new Element(‘div’,{ props :{ id:"container" }, style:{ color:"red" } },headline) ~~~ 你覺得和jsx的寫法很相似對吧 ，jsx轉換之后真正調用的api: Let app = React.creatElement(“div”,{id:’container’,styles:{color:red}},headline) ~~~ //jsx寫法 let styles = { color:red } let app = <div id=“container” styles={styles}> <h1></h1></div> ~~~ 從上面的例子可以看出jsx是一種reactElement的便捷寫法 ，reactElement 是什么？ 它是一種輕量級、無狀態的 不可改變的 dom元素的虛擬表述,其實就是一個js對象表示dom元素而已。我們自己創建的elemen對象和reactElement 看起來是差不多的,而將 ReacElement 插入真正的dom結構需要render方法.