react】

1. 定位：React 是一個用於構建使用者介面的JavaScript庫。

2. 特點：它採用聲明範式來描述應用，建立虛擬dom，支援JSX語法，通過react構建元件，能夠很好的去複用程式碼；

3. 缺點：react抽離了dom，使我們構建頁面變得簡單，但是對於一個大型複雜應用來說，只有dom層的便捷是不夠的，如何組織、管理應用的程式碼，如何在元件件進行有效通訊，這些它都沒有解決；因此，它還需要一個前端架構才能應對大型應用；

【redux】

1. 定位：它是將flux和函數語言程式設計思想結合在一起形成的架構；

2. 思想：檢視與狀態是一一對應的；所有的狀態，都儲存在一個物件裡面；

3. API：

   1. store：就是一個數據池，一個應用只有一個；　　
   2. state：一個 State 對應一個 View。只要 State 相同，View 就相同。
   3. action：State 的變化，會導致 View 的變化。但是，使用者接觸不到 State，只能接觸到 View。所以，State 的變化必須是 View 導致的。Action 就是 View 發出的通知，表示 State 應該要發生變化了。Action 是一個物件。其中的type屬性是必須的，表示 Action 的名稱。其他屬性可以自由設定。
   4. dispatch：它是view發出action的唯一方法；
   5. reducer：view發出action後，state要發生變化，reducer就是改變state的處理層，它接收action和state，通過處理action來返回新的state；
   6. subscribe：監聽。監聽state，state變化view隨之改變；

【react-redux】

1. 定位：react-redux是為了讓redux更好的適用於react而生的一個庫，使用這個庫，要遵循一些規範；

2. 主要內容

   1. UI元件：就像一個純函式，沒有state，不做資料處理，只關注view，長什麼樣子完全取決於接收了什麼引數（props）
   2. 容器元件：關注行為派發和資料梳理，把處理好的資料交給UI元件呈現；React-Redux規定，所有的UI元件都由使用者提供，容器元件則是由React-Redux自動生成。也就是說，使用者負責視覺層，狀態管理則是全部交給它。
   3. connect：這個方法可以從UI元件生成容器元件；但容器元件的定位是處理資料、響應行為，因此，需要對UI元件新增額外的東西，即mapStateToProps和mapDispatchToProps，也就是在元件外加了一層state；
   4. mapStateToProps：一個函式， 建立一個從（外部的）state物件到（UI元件的）props物件的對映關係。 它返回了一個擁有鍵值對的物件；
   5. mapDispatchToProps：用來建立UI元件的引數到store.dispatch方法的對映。 它定義了哪些使用者的操作應該當作動作，它可以是一個函式，也可以是一個物件。

以上，redux的出現已經可以使react建立起一個大型應用，而且能夠很好的管理狀態、組織程式碼，但是有個棘手的問題沒有很好地解決，那就是非同步；

【redux-saga】：

1. 定位：react中介軟體；旨在於更好、更易地解決非同步操作（action）；redux-saga相當於在Redux原有資料流中多了一層，對Action進行監聽，捕獲到監聽的Action後可以派生一個新的任務對state進行維護；

2. 特點：通過 Generator 函式來建立，可以用同步的方式寫非同步的程式碼；

3. API：

   1. Effect： 一個簡單的物件，這個物件包含了一些給 middleware 解釋執行的資訊。所有的Effect 都必須被 yield 才會執行。
   2. put：觸發某個action，作用和dispatch相同；

【dva】

1. 定位：dva 首先是一個基於 redux 和 redux-saga 的資料流方案，然後為了簡化開發體驗，dva 還額外內建了 react-router 和 fetch，所以也可以理解為一個輕量級的應用框架。dva = React-Router + Redux + Redux-saga；

2. 核心：

   1. State：一個物件，儲存整個應用狀態；
   2. View：React 元件構成的檢視層；
   3. Action：一個物件，描述事件
   4. connect 方法：一個函式，繫結 State 到 View
   5. dispatch 方法：一個函式，傳送 Action 到 State

3. model：dva 提供 app.model 這個物件，所有的應用邏輯都定義在它上面。

4. model內容：

   1. namespace：model的名稱空間；整個應用的 State，由多個小的 Model 的 State 以 namespace 為 key 合成；
   2. state：該名稱空間下的資料池；
   3. effects：副作用處理函式；
   4. reducers：等同於 redux 裡的 reducer，接收 action，同步更新 state；
   5. subscriptions：訂閱資訊；
      轉：https://www.cnblogs.com/shzj/p/11174802.html