爲何使用react

一. 函數式編程

React 把用戶界面抽象成一個個組件，如按鈕組件 Button、對話框組件 Dialog、日期組件 Calendar。
 開發者經過組合這些組件，最終獲得功能豐富、可交互的頁面。經過引入 JSX 語法，複用組件變得很是容易，
 同時也能保證組件結構清晰。有了組件這層抽象，React 把代碼和真實渲染目標隔離開來，除了能夠在瀏覽器
 端渲染到 DOM 來開發網頁外，還能用於開發原生移動應用。

二 虛擬DOM

DOM操做的效率是很低的，並且不是通常的慢，並且這也是引起性能問題的常見問題之一。爲何會慢呢？
由於對 DOM的修改成影響網頁的用戶界面，重繪頁面是一項昂貴的操做。太多的DOM操做會致使一系列的重
繪操做，爲了確保執行結果的準確性，全部的修改操做是按順序同步執行的。咱們稱這個過程叫作迴流
（reflow），同時這也是最昂貴的瀏覽器操做之一。迴流操做主要會發生在幾種狀況下：

• 當對DOM節點執行新增或者刪除操做時。
• 動態設置一個樣式時（好比element.style.width="10px"）。
• 當獲取一個必須通過計算的尺寸值時，好比訪問offsetWidth、clientHeight或者其餘須要通過計算的CSS值（在兼容DOM的瀏覽器中，能夠經過getComputedStyle函數獲取；在IE中，能夠經過currentStyle屬性獲取）。 解決問題的關鍵，就是限制經過DOM操做所引起迴流的次數。大部分瀏覽器都不會在JavaScript的執行過程當中更新DOM。相應的，這些瀏覽器將對對DOM的操做放進一個隊列，並在JavaScript腳本執行完畢之後按順序一次執行完畢。也就是說，在JavaScript執行的過程當中，用戶不能和瀏覽器進行互動，直到一個迴流操做被執行。（失控腳本對話框會觸發迴流操做，由於他執行了一個停止JavaScript執行的操做，此時會對用戶界面進行更新）

真實頁面對應一個 DOM 樹。在傳統頁面的開發模式中，每次須要更新頁面時，都要手動操做DOM進行更新。DOM 操做很是昂貴。咱們都知道在前端開發中，性能消耗最大的就是 DOM 操做，並且這部分代碼會讓總體項目的代碼變得難以維護。React 把真實 DOM 樹轉換成 JavaScript 對象樹，每次數據更新後，從新計算 Virtual DOM，並和上一次生成的 Virtual DOM 作對比，對發生變化的部分作批量更新。React 也提供了直觀的 houldComponentUpdate 生命週期回調，來減小數據變化後沒必要要的 Virtual DOM 對比過程，以保證性能。咱們說 Virtual DOM 提高了 React 的性能，但這並非 React 的惟一亮點。此外，Virtual DOM的渲染方式也比傳統 DOM 操做好一些，但並不明顯，由於對比 DOM 節點也是須要計算資源的。它最大的好處其實還在於方便和其餘平臺集成，好比 react-native 是基於 Virtual DOM 渲染出原生控件，由於 React 組件能夠映射爲對應的原生控件。在輸出的時候，是輸出 Web DOM，仍是 Android 控件，仍是 iOS 控件，就由平臺自己決定了。所以，react-native 有一個口號——LearnOnce，Write Anywhere。