【ReactJS】嘗試理解React新的前端思維方式
React特點：
- 虛擬DOM: React也是以資料驅動的，每次資料變化React都會掃碼整個虛擬DOM樹，自動計算與上次虛擬DOM的差異變化，然後針對需要變化的部分進行實際的瀏覽器DOM更新。
- 元件化： React可以從功能角度橫向劃分，將UI分解成不同元件，各元件都獨立封裝，整個UI是由一個個小元件構成的一個大元件，每個元件只關係自身的邏輯，彼此獨立。
- 單項資料流：React設計者認為資料雙向繫結雖然便捷，但在複雜場景下副作用也是很明顯，所以React更傾向於單向的資料流動-從父節點傳遞到子節點。（使用ReactLink也可以實現雙向繫結，但不建議使用）。
要了解一樣東西的特點，最好的方法當然是拿這個東西和另一樣東西作比較。我們就拿React和jQuery來比較。
jQuery：是一個JavaScript 的庫，借鑑了結合CSS簡化和精簡了JavaScript的操作方式和解決瀏覽器相容問題。選中一些DOM元素，然後對這些元素做一些操作，這是一種最容易理解的開發模式。但當業務邏輯複雜的時候，每行程式碼都會有不知所云的感覺。
React：是一個JavaScript的框架，React利用宣告式的語法，讓開發者專注於描述使用者介面“顯示成什麼樣子”，而不是重複思考“如何去顯示”，這樣可以大大提高開發效率，也讓程式碼更加容易管理。雖然React是通過重複渲染來實現動態更新效果，但是藉助Virtual DOM技術，實際上這個過程並不牽涉太多的DOM操作，所以渲染效率更高。React的主要理念之一就是基於元件來開發應用。
jQuery 與 React 的區別：
Q：在同一個區域將JS還有HTML混在一起寫，不是說是一種壞的風格嗎？
A：對於簡單的頁面而言，這樣寫可能會是一種壞的風格，但是對於大型的網頁應用就不一定了。在大型的網頁應用中，會有成百上千的UI，每一個UI都包含他自己的標籤以及行為。對於每一個UI而言，如果標籤還有事件行為放在一起，會更加利於維護。React就是設計用來製作大型的網頁應用。眾所周知的，React是全球最大的網頁應用公司FaceBook開源並且使用的。
作為軟體設計的通則，元件的劃分要滿足高內聚和低耦合的原則。
高內聚 指的是把邏輯緊密相關的內容放在一個元件中。使用者介面無外乎內容、互動行為和樣式。傳統上，內容由HTML表示，互動行為放在JavaScript程式碼檔案中，樣式放在CSS檔案中定義。這雖然滿足一個功能模組的需要，卻要放在三個不同的檔案中，這其實不滿足高內聚的原則。React卻不是這樣，展示內容的JSX、定義行為的JavaScript程式碼，甚至定義樣式的CSS，都可以放在一個JavaScript檔案中，因為它們本來就是為了實現一個目的而存在的，所以說React天生具有高內聚的特點
低耦合 指的是不同元件之間的依賴關係要儘量弱化，也就是每個元件要儘量獨立。保持整個系統的低耦合度，需要對系統中的功能有充分的認識，然後根據功能點劃分模組，讓不同的元件去實現不同的功能，這個功夫還在開發者身上，不過，React元件的對外介面非常規範，方便開發者設計低耦合的系統。
React是在什麼歷史背景下產生的？
最初AngularJS使用了MVC(模型-檢視-控制器)模式構建，然後逐漸演化成了MVVM(模型-檢視-檢視模型)-MVC混合架構。React卻是另一方面，它的關注點只在MVC模型的”V”上 – 它被設計用來展現資料，而將其他方面交由應用架構中程式設計人員選擇的其他元件負責。
雖然Facebook最初也是用MVC這種框架，但是，Facebook的工程部門逐漸發現，對於非常巨大的程式碼庫和龐大的組織，按照他們的原話就是“MVC真的很快就變得非常複雜”。每當工程師想要增加一個新的功能時，對程式碼的修改很容易引入新的bug，因為不同模組之間的依賴關係讓系統變得“脆弱而且不可預測”。對於剛剛加入團隊的新手，更是舉步維艱，因為不知道修改程式碼會造成什麼樣的後果。如果要保險，就會發現寸步難移；如果放手去幹，有可能引發很多bug。
React和MVC思想的框架不同，每個元件獨立封裝，功能獨立，我們只需關心自己部分的邏輯。與單一功能原則相同：獨立的元件應該只做一件事情。
前後端MVC框架渲染有何區別？
MVC框架提出的資料流很理想，使用者請求先到達Controller中，由Controller呼叫Model獲得資料，然後把資料交給View，但是，在實際框架實現中，總是允許View和Model可以直接通訊，越來越多的同行發現，在MVC中讓View和Model直接對話就是災難。
伺服器端MVC框架往往就是每個請求就只在Controller-Model-View三者之間走一圈，結果就返回給瀏覽器去渲染或者其他處理了，然後這個請求生命週期的Controller-Model-View就可以回收銷燬了，這是一個嚴格意義的單向資料流；對於瀏覽器端的MVC框架，存在使用者的互動處理，介面渲染出來之後，Model和View依然存在於瀏覽器中，這時候就會誘惑開發者為了簡便，讓現存的Model與View直接對話。
React的Virtual DOM
傳統的web應用，操作DOM一般是直接更新操作的，但是我們知道DOM更新通常是比較昂貴的。而React為了儘可能減少對DOM的操作，提供了一種不同的而又強大的方式來更新DOM，代替直接的DOM操作。就是Virtual DOM,一個輕量級的虛擬的DOM，就是React抽象出來的一個物件，描述dom應該什麼樣子的，應該如何呈現。通過這個Virtual DOM去更新真實的DOM，由這個Virtual DOM管理真實DOM的更新。
為什麼通過這多一層的Virtual DOM操作就能更快呢？ 這是因為React有個diff演算法，更新Virtual DOM並不保證馬上影響真實的DOM，React會等到事件迴圈結束，然後利用這個diff演算法，通過當前新的dom表述與之前的作比較，計算出最小的步驟更新真實的DOM。
虛擬DOM(virtual-dom)不僅帶來了簡單的UI開發邏輯，同時也帶來了元件化開發的思想，所謂元件，即封裝起來的具有獨立功能的UI部件。
如果說MVC的思想讓你做到檢視-資料-控制器的分離，那麼元件化的思考方式則是帶來了UI功能模組之間的分離。
React 為了更高超的效能而使用虛擬 DOM 作為其不同的實現。 它同時也可以由服務端 Node.js 渲染 － 而不需要過重的瀏覽器 DOM 支援。