React學習總結

1. React框架介紹

1.1 什麼是 React

React是一個簡單的javascript UI庫，用於構建高效、快速的用戶界面。它是一個輕量級庫，所以很受歡迎。它遵循組件設計模式、聲明式編程範式和函數式編程概念，以使前端應用程序更高效。它使用虛擬DOM來有效地操做DOM。它遵循從高階組件到低階組件的單向數據流。

1.2 專一視圖層

如今應用的日趨複雜要求更增強大的開發工具
React並非完整的MVC/MVVM框架，它專一於提供清晰、簡潔的view層解決方案。
而又與模板引擎不一樣，React不只專一於解決view層的問題，又是一個包括View和Controller的庫。
對於複雜的應用，能夠根據應用場景選擇業務層框架，並根據須要搭配Flux、Redux、GraphQL/Relay來使用。
React框架沒有提供許多概念和複雜的API，它以Minimal API Interface爲目標，只提供組件化相關的少許API。同時爲了保持靈活性，它也沒有自創一套規則，而是儘量的讓開發者使用原生JavaScript進行開發。

1.3 Virtual Dom

• 傳統dom更新：真實頁面對應一個DOM樹，每次須要更新頁面都要手動操做DOM進行更新
• 虛擬dom：React把真實DOM樹轉換成JavaScript對象樹，也就是Virtual Dom，每次更新，就讓虛擬DOM樹作一次標記，到最後事件循環機制結束以後，全部節點都改變再進行一次DOM的渲染。

前端開發中，DOM操做十分昂貴。性能消耗最大的就是DOM操做，並且這部分代碼會讓總體項目的代碼變得難以維護。而虛擬DOM的出現很好的緩解了這個問題。
注：
虛擬DOM指經過JS腳本編譯生成的，經過append添加節點到body中的DOM元素；
真實dom是HTML裏面寫入的一些結構在JS腳本里面經過document獲得的元素都是真實DOM。

1.4 JSX語法

React爲方便view層組件化，承載了構建HTML結構化頁面的職責。從這點看來，React與其餘JavaScript模板語言有着殊途同歸之處，不一樣的是React是經過建立和更新虛擬元素來管理整個Virtual DOM的。
JSX將HTML語法直接加入到JavaScript代碼中，而後經過翻譯器轉換成純JavaScript語法由瀏覽器解讀。實際開發中，JSX在產品打包階段就已經編譯成了純JavaScript，會讓代碼更直觀和便於維護。
編譯過程是由Bable的JSX編譯器實現的。

1.5 組件和函數式編程

react把過去不斷重複構建UI的過程抽象成組件，且在給定參數的狀況下約定渲染對應的UI界面。函數式編程使得React能充分利用不少函數方法減小冗餘代碼。

2. React原理

React把用戶界面抽象成一個個組件，開發者經過組合這些組件，最終獲得功能豐富、可交互的頁面。經過引入JSX語法，複用組件就變得容易，同時也能夠保證組件結構清晰。有了組件這層抽象，React實現了把代碼和真實渲染目標分隔開來。
和vue同樣，react是一個用於構建用戶界面的 JavaScript 庫,起初只是Facebook的一個內部項目，用來架設 Instagram 的網站，後於2013年5月開源。
特色：
一、使用 JSX語法 建立組件，實現組件化開發，爲函數式的 UI 編程方式打開了大門
二、性能高的讓人稱讚：經過 diff算法 和 虛擬DOM 實現視圖的高效更新
核心概念：
一、虛擬DOM（Virtual DOM）
二、Diff算法（虛擬DOM的加速器，提高React性能的法寶）

3. React特色

6點：聲明式設計、高效、靈活、JSX語法、組件和單向響應的數據流。

• 聲明式設計指React採用聲明範式，能夠輕鬆描述應用（jsx就是一個最明顯的聲明式，簡單、粗暴，直接聲明全部dom元素和屬性）；
• 高效指React經過對虛擬DOM的模擬，最大限度的減小了與DOM的交互；
• 靈活是指React能夠和已知的庫或者框架很好的配合；
• JSX語法是javascript 語法的拓展；
• 組件：經過React構建組件，使得代碼更容易獲得複用，能更好的應用於大型開發；
• 單向響應的數據流：React實現了這點，從而減小了重複代碼，比傳統綁定數據更簡單的緣由就在於此。

4. React核心

React的核心是組件
組件設計的目的（三大優點）：

• 提升代碼複用率     組件將數據和邏輯封裝，相似面向對象的類
• 下降測試難度        組件高內聚低耦合，很容易對單個組件進行測試
• 下降代碼複雜度     直觀的語法提升了可讀性

注：
高內聚：每個組件專一作本身的功能
低耦合：組件之間耦合度低,不會相互有太大影響

5. React的精髓

函數式編程是React的精髓
簡單說，"函數式編程"是一種"編程範式"，也就是如何編寫程序的方法論。它屬於"結構化編程"的一種，主要思想是把運算過程儘可能寫成一系列嵌套的函數調用。
函數式編程的好處：

• 代碼簡單，開發快速              由於它把邏輯開發運算過程儘量地寫成了一系列嵌套函數，進行調用
• 接近天然語言，易於理解       JS函數式的開發語言
• 更方便的代碼管理                 封裝函數使得後期修改更加方便
• 易於"併發編程"                     能夠同時進行不少函數的聲明和操做
• 代碼的熱升級                        瀏覽器無刷新的狀況下自動
• 是簡單函數，易於測試

6. Vue與React兩個框架的區別

相同點

1. 數據驅動視圖，提供響應式的視圖組件
2. 都有Virtual DOM，組件化開發，經過props參數進行父子組件數據的傳遞，都實現webComponents規範
3. 都支持服務端渲染
4. 都有支持native的方案，React的React native，Vue的weex

不一樣點

1. 社區：React社區仍是要比vue大不少；
   
2. 開發模式：React在view層侵入性仍是要比Vue大不少的,React嚴格上只針對MVC的view層，Vue則是MVVM模式的一種實現；
   
3. 數據綁定：Vue有實現了雙向數據綁定，React數據流動是單向的
   
4. 數據渲染：對於大規模數據渲染，React要比Vue更快，渲染機制啓動時候要作的工做比較多；
   
5. 數據更新方面：Vue 因爲採用依賴追蹤，默認就是優化狀態：你動了多少數據，就觸發多少更新，很少也很多。React在複雜的應用裏有兩個選擇:
   (1). 手動添加 shouldComponentUpdate 來避免不須要的 vdom re-render。 (2).Components 儘量都用 pureRenderMixin，而後採用 redux 結構 + Immutable.js；
   
6. 開發風格的偏好：React 推薦的作法是 JSX + inline style，也就是把 HTML 和 CSS 全都寫進 JavaScript 了，即"all in js"；Vue進階以後推薦的是使用 webpack + vue-loader 的單文件組件格式，即html,css,js寫在同一個文件；
   
7. 使用場景：React配合Redux架構適合超大規模多人協做的複雜項目;Vue則適合小快靈的項目。對於須要對 DOM 進行不少自定義操做的項目，Vue 的靈活性優於 React；
   
8. Vue要比React更好上手，具體可能體如今不少人不熟悉React的JSX語法和函數式編程的思想，以及想要發揮出React的最大威力須要學習它一系列生態的緣故；
   
9. Vue着重提升開發效率,讓前端程序員更快速方便的開發應用。React着重於變革開發思想，提高前端程序員編程的深度與創造力,讓前端工程師成爲真正的程序員而不是UI的構建者；

7. Vue與React兩個框架各自的優點

Vue的優點包括：

• 模板和渲染函數的彈性選擇
• 簡單的語法及項目建立
• 更快的渲染速度和更小的體積

React的優點包括：

• 更適用於大型應用和更好的可測試性
• 同時適用於Web端和原生App
• 更大的生態圈帶來的更多支持和工具