好程式設計師web學習路線初步認知react框架

　　好程式設計師 web學習路線 初步認知 react框架， React的起源和發展 ， 起初 facebook在建設instagram（圖片分享）的時候嘞，因為牽扯到一個東東叫資料流，那為了處理資料流並且還要考慮好效能方面的問題嘞，Facebook開始對市場上的各種前端MVC框架去進行一個研究，然而並沒有看上眼的，於是Facebook覺得，還是自己開發一個才是最棒的，那麼他們決定拋開很多所謂的“最佳實踐”，重新思考前端介面的構建方式，他們就自己開發了一套，果然大牛創造力還是很強大的。

React的出發點

基於 HTML的前端介面開發正變得越來越複雜，其本質問題基本都可以歸結於如何將來自於伺服器端或者使用者輸入的動態資料高效的反映到複雜的使用者介面上。而來自Facebook的React框架正是完全面向此問題的一個解決方案，按官網描述，其出發點為：用於開發資料不斷變化的大型應用程式（Building large applications with data that changes over time）。相比傳統型的前端開發，React開闢了一個相當另類的途徑，實現了前端介面的高效能高效率開發。

React與傳統MVC的關係

React不是一個完整的MVC框架，最多可以認為是MVC中的V（View），甚至React並不非常認可MVC開發模式；

React高效能的體現：虛擬DOM

React高效能的原理：

在 Web開發中我們總需要將變化的資料實時反應到UI上，這時就需要對DOM進行操作。而複雜或頻繁的DOM操作通常是效能瓶頸產生的原因（如何進行高效能的複雜DOM操作通常是衡量一個前端開發人員技能的重要指標）。

React為此引入了虛擬DOM（Virtual DOM）的機制：在瀏覽器端用Javascript實現了一套DOM API。基於React進行開發時所有的DOM構造都是透過虛擬DOM進行，每當資料變化時，React都會重新構建整個DOM樹，然後React將當前整個DOM樹和上一次的DOM樹進行對比，得到DOM結構的區別，然後僅僅將需要變化的部分進行實際的瀏覽器DOM更新。而且React能夠批處理虛擬DOM的重新整理，在一個事件迴圈（Event Loop）內的兩次資料變化會被合併，例如你連續的先將節點內容從A-B,B-A，React會認為A變成B，然後又從B變成A UI不發生任何變化，而如果透過手動控制，這種邏輯通常是極其複雜的。

儘管每一次都需要構造完整的虛擬 DOM樹，但是因為虛擬DOM是記憶體資料，效能是極高的，部而對實際DOM進行操作的僅僅是Diff分，因而能達到提高效能的目的。這樣，在保證效能的同時，開發者將不再需要關注某個資料的變化如何更新到一個或多個具體的DOM元素，而只需要關心在任意一個資料狀態下，整個介面是如何Render的。資料驅動，宣告式

React的特點和優勢

虛擬 DOM

我們以前操作 dom的方式是透過document.getElementById()的方式，這樣的過程實際上是先去讀取html的dom結構，將結構轉換成變數，再進行操作而reactjs定義了一套變數形式的dom模型，一切操作和換算直接在變數中，這樣減少了操作真實dom，效能真實相當的高，和主流MVC框架有本質的區別，並不和dom打交道

元件系統

react最核心的思想是將頁面中任何一個區域或者元素都可以看做一個元件 component

那麼什麼是元件呢？

元件指的就是同時包含了 html、css、js、image元素的聚合體

使用 react開發的核心就是將頁面拆分成若干個元件，並且react一個元件中同時耦合了css、js、image，這種模式整個顛覆了過去的傳統的方式

單向資料流

其實 reactjs的核心內容就是資料繫結，所謂資料繫結指的是隻要將一些服務端的資料和前端頁面繫結好，開發者只關注實現業務就行了

JSX 語法

在 vue中，我們使用render函式來構建元件的dom結構效能較高，因為省去了查詢和編譯模板的過程，但是在render中利用createElement建立結構的時候程式碼可讀性較低，較為複雜，此時可以利用jsx語法來在render中建立dom，解決這個問題，但是前提是需要使用工具來編譯jsx

JSX語法糖

JSX是一種語法，全稱：javascript xml

JSX語法不是必須使用的，但是因為使用了JSX語法之後會降低我們的開發難度，故而這樣的語法又被成為語法糖

在不使用 JSX的時候，需要使用React.createElement來建立元件的dom結構，但是這樣的寫法雖然不需要編譯，但是維護和開發的難度很高，且可讀性很差

Var   world   =   React.createElement( 'h1',   {

className:'abc',

id:'haha'

},[

React.createElement('span',null,'Hello'),   React.createElement('mark',null,'React')

])

//利用ReactDOM物件的render方法將元件渲染到某個節點裡 ReactDOM.render(world,document.getElementById("app1")) ```

及時使用了 JSX語法了之後，也是需要將其編譯成原生的createElement的

JSX就是在js中使用的xml，但是，這裡的xml不是真正的xml，只能借鑑了一些xml的語法，例如：

最外層必須有根節點、標籤必須閉合