淺析 redux
含有抽象數據而沒有業務邏輯的組件,咱們 稱之爲容器型組件(container component);
而沒有數據請求邏輯只有業務邏輯的組件,咱們稱之 爲展現型組件(presentational component)
MVC
Model
Model ᠆責保存應用數據,和後端交互同步應用數據,或ಢ驗數據。 Model 不涉及用戶界面,也不涉及表示層,而是表明應用程序可能須要的࿗特形式的數據。 當 Model 改變時,它會通知它的觀察者(如視圖)做出相應的反應。 的來講,Model 主要與業務數據有關,與應用內交互狀態無關。
View
View 是 Model 的可視化表示,表示當前狀態的視圖。前端 View ᠆責構建和維護 DOM 元素。 View 對應用程序中的 Model 和 Controller 的瞭解是有限的,更新 Model 的實際任務都是在 Controller 上。 用戶能夠與 View 交互,包括讀取和編輯 Model,在 Model 中獲取或設置屬性值
Controller
᠆責鏈接 View 和 Model,Model 的任何改變會應用到 View 中,View 的操做會經過 Controller 應用到 Model 中。
MVVM
最大變化在於 VM(ViewModel)代替了 C(Controller)。
Flux
Flux 的核心思想就是數據和邏輯永遠單向流動。
dispatcher ᠆責分發事件;
store ᠆責保存數據,同時響應事件並更新數據;
view 負責訂閱 store 中的數據,並使用這些數據 渲染相應的頁面。
Redux
咱們都知道 Flux 自己既不是庫,也不是框架,而是一種應用的架構思想。而 Redux 呢,它的核心代碼能夠理解成一個庫,但同時也強調與 Flux 相似的架構思想。
Redux 自己只把本身定位成一個「可預測的狀態容器」
Redux三大原則:
單一數據源
狀態是隻讀的
在 Redux 中,咱們並不會本身用代碼來定義一個 store。取而代之的是,咱們定義一個 reducer, 它的功能是根據當前觸發的 action 對當前應用的狀態(state)進行迭代,這裏咱們並無直接修改應用的狀態,而是返回了一͊全新的狀態。 Redux 提供的 createStore 方法會根據 reducer 生成 store。最後,咱們能夠利用 store. dispatch 方法來達到修改狀態的目的。
狀態修改均→純函數完成
在 Redux 裏,咱們經過定義 reducer 來肯定狀態的修改,而每個 reducer 都是純函數,這意 味着它沒有反作用,即接受必定的輸入,一定會獲得必定的輸出。
reducer 本質上是一個函數, 其函數簽名爲 reducer(previousState, action) => newState。能夠看出,reducer 在處理 action 的 同時,還須要接受一個 previousState
Redux 中最核心的 API——createStore
包含 4 個方法:
getState():獲取 store 中當前的狀態。
dispatch(action):分發一個 action,並返回這個 action,這是惟一能改變 store 中數據的 方式。
subscribe(listener):註冊一個監聽者,它在 store 發生變化時被調用。
replaceReducer(nextReducer):更新當前 store 裏的 reducer,通常只會在開發模式中調用 該方法。
與 React 綁定
react-redux 提供了一個組件和一個 API 幫助Redux 和 React 進行綁定,一個是 React 組件 ,一個是 connect()。
接受一個 store 做爲props,它是整個 Redux 應用的頂層組件,而 connect() 提供了在整個 React 應用的任意組件中獲取 store 中數據的功能。
middleware
這種異步 action 的需求能夠經過 Redux 原生的 middleware 設計來實現
輪詢是長鏈接的一種實現方式
歡迎關注本站公眾號,獲取更多信息