Redux和react-redux的學習總結
寫在最前面:這段時間一直在看前端方面的東西,之前只是瞭解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提交表單: