JSX到底是什么

使用React就一定會(huì)寫(xiě)JSX，JSX到底是什么呢？它是一種JavaScript語(yǔ)法的擴(kuò)展，React使用它來(lái)描述用戶界面長(zhǎng)成什么樣子，雖然它看起來(lái)非常像HTML，但他確實(shí)是javaScript，在React代碼執(zhí)行之前，Babel會(huì)對(duì)將JSX編譯為React API。

<div className="container"><h3>Hello React</h3><p>React is Great</p>
</div>

React.createElement('div',{className: 'container'}, React.createElement('h3', null, 'Hello React'),React.createElement('p', null, 'Hello React')
)

從兩種語(yǔ)法對(duì)比來(lái)看，JSX語(yǔ)法的出現(xiàn) 只是為了讓React開(kāi)發(fā)人員編寫(xiě)界面代碼更加輕松。

React.createElement 作用是創(chuàng)建虛擬dom

DOM操作問(wèn)題

在現(xiàn)代web應(yīng)用程序中使用javaScript操作DOM是必不可少的，但遺憾的是它比其他大多數(shù)JavaScript操作要慢的多。
大多數(shù)JavaScript框架對(duì)于DOM的更新遠(yuǎn)遠(yuǎn)操作其必須進(jìn)行的更新，從而使得這種緩慢操作變得更糟。
例如假設(shè)你有包含十個(gè)項(xiàng)目的列表，你僅僅更改了列表的第一項(xiàng)，大多數(shù)JavaScript框架會(huì)重建整個(gè)列表，這比必要的工作要多十倍。
更新效率低下已經(jīng)成為嚴(yán)重問(wèn)題，為了解決這個(gè)問(wèn)題，React普及了一種叫做Virtual Dom的東西，Virtual DOM出現(xiàn)的目的就是為了提高JavaScript操作DOM對(duì)象的效率。

為什么是Virtual DOM

在React中， 每個(gè)DOM對(duì)象都有一個(gè)對(duì)應(yīng)的Virtual DOM對(duì)象，它是DOM對(duì)象的JavaScript對(duì)象表現(xiàn)形式，其實(shí)就是使用JavaScript對(duì)象來(lái)描述DOM對(duì)象信息，比如DOM對(duì)象的類(lèi)型是什么，她身上有哪些屬性，它擁有哪些子元素。
可以把Virtual DOM對(duì)象理解為DOM對(duì)象的副本，但是它不能直接顯示在屏幕上。

<div className="container"><h3>Hello React</h3><p>React is Great</p>
</div>

{type: 'div',props: {className: 'container'},children: [{type: 'h3',props: null,children: [{type: 'text'}, props: {textContent: 'Hello React'}]},{type: 'p',props: null,children: [{type: 'text'}, props: {textContent: 'Reac'}]}]
}

Virtual DOM如何提升效率

精準(zhǔn)找出發(fā)生變化的部分，只更新發(fā)生變化的部分。
在React第一次創(chuàng)建DOM對(duì)象后，會(huì)為每個(gè)DOM對(duì)象創(chuàng)建其對(duì)應(yīng)的Virtual DOM對(duì)象，在DOM對(duì)象發(fā)生更新之前，React會(huì)先更新所有的Virtual DOM對(duì)象， 然后React會(huì)將更新后的Virtual DOM和更新前的Virtual DOM進(jìn)行比較，從而找出發(fā)生變化的部分。
React會(huì)將發(fā)生變化的部分更新到真實(shí)的DOM對(duì)象中，React 僅更新必要更新的部分。
Virtual DOM對(duì)象的更新和比較 僅發(fā)生在內(nèi)存中，不會(huì)再視圖中渲染任何內(nèi)容，所以這一部分的性能損耗是微不足道的。

創(chuàng)建Virtual DOM

在React代碼執(zhí)行前 JSX會(huì)被Babel轉(zhuǎn)換為React.createElement方法的調(diào)用，在調(diào)用createElement方法時(shí)會(huì)傳入元素的類(lèi)型，元素的屬性，以及元素的子元素，createElement方法的返回值為構(gòu)建好的Virtual DOM對(duì)象