寫在最前面：這段時間一直在看前端方面的東西，之前只是瞭解HTML，CSS，JS，由於公司交代了前端的任務，所以後面又看了jQuery，Bootstrap，React，Redux，react-redux。

Bootstrap框架的優勢：（封裝CSS，移動裝置優先）

1. 移動裝置優先、響應式設計：Bootstrap 的響應式 CSS 能夠自適應於桌上型電腦、平板電腦和手機；

2. Bootstrap自帶全域性CSS設定、可定義基本的 HTML 元素樣式、可擴充套件的 class；

3. 定義了多種可重用的元件，同時提供了一個帶有網格系統、連結樣式、背景的基本結構；

React框架的優勢：（減少DOM操作，元件渲染UI）

1. React主要用於構建UI，通過對DOM的模擬，最大限度地減少與DOM的互動；

2. 元件構建，程式碼複用

3. 單向的響應資料流，state通過與使用者互動來改變狀態，props是不變的，通常將父元件設定為state，子元件設定為props；

3. React 把元件看成是一個狀態機（State Machines）。通過與使用者的互動，實現不同狀態，然後渲染 UI，讓使用者介面和資料保持一致。React 裡，只需更新元件的 state，然後根據新的 state 重新渲染使用者介面（不要操作 DOM）。

React 只是 DOM 的一個抽象層，並不是 Web 應用的完整解決方案。有兩個方面它沒涉及：程式碼結構，元件之間的通訊。從而Redux框架來進行優化。　　

Redux框架的優勢：大型企業專案中解決元件通訊，優化程式碼結構；小專案可不用該框架來優化React。

學習Redux之前最好參考Flux框架：

Flux將一個應用分成四個部分：

View： 檢視層

Action（動作）：檢視層發出的訊息（比如mouseClick）

Dispatcher（派發器）：用來接收Actions、執行回撥函式

Store（資料層）：用來存放應用的狀態，一旦發生變動，就提醒Views要更新頁面
 

Redux中的基本概念：

1. store：Store 就是儲存資料的地方，你可以把它看成一個容器。整個應用只能有一個 Store；

2. state：Store物件包含所有資料；

3. Action：Action 就是 View 發出的通知，表示 State 應該要發生那種type的變化，同時該通知中可以攜帶其他資料；

4. ActionCreator：通用的Action轉換函式；

5. store.dispatch()：store.dispatch()是 View 發出 Action 的唯一方法；

6. Reducer：Reducer接受 Action 和當前 State 作為引數，返回一個新的 State；

7. 非同步操作；

React-Redux的概念：

1. connect：用於從 UI 元件生成容器元件，從而將這兩種元件連起來；

2. mapStateToProps：建立一個從（外部的）state物件到（UI 元件的）props物件的對映關係；

3. mapDispatchToProps：建立 UI 元件的引數到store.dispatch方法的對映；

4. Provider：Provider在根元件外面包了一層，這樣App中的所有子元件就預設都可以拿到state；

公司要求在頁面上增加一個按鈕來處理相應的工單請求：

1. 初始資料結構：

2. 連線UI容器：

3. 新增相應的Modal層，並定義事件函式，同時將父元件的資料傳入子元件：

4. 新增事件處理函式從而控制Modal層的顯示與隱藏：

5. 時間派發mapDispatchToProps定義，其中processRecycleSubmit為非同步處理：

6. Reducer處理Action：

7. 重新整理state到子元件的props中：

8. 回收處理函式processRecycleSubmit，構建表單，通過Ajax提交表單：