Dva是什么？

在剛剛接觸Dva時(shí)，我最想知道的第一個(gè)問題就是：

Dva官網(wǎng)文檔的介紹是：

dva 是體驗(yàn)技術(shù)部開發(fā)的 React 應(yīng)用框架，將上面三個(gè) React 工具庫(kù)包裝在一起，簡(jiǎn)化了 API，讓開發(fā) React 應(yīng)用更加方便和快捷。

dva = React-Router + Redux + Redux-saga

說實(shí)話這些名詞讓我只能一個(gè)一個(gè)的百度，雖然不能說毫無(wú)收獲，但是依然難以理解。 現(xiàn)在我的理解Dva是一個(gè)輕量化的數(shù)據(jù)流向方案。 既然說是數(shù)據(jù)流向方案，那就應(yīng)該先看數(shù)據(jù)流向的流程圖嘛，但是在我看到官網(wǎng)的流程圖后，發(fā)現(xiàn)對(duì)于第一次接觸Dva的我來說，確實(shí)無(wú)異于“天書”。

流程圖怎么看？

其中的單詞代表的又是什么意思呢？

參考最近接觸到的項(xiàng)目中使用的Dva流程和官網(wǎng)文檔給出的解釋，再次進(jìn)行梳理。

首先，當(dāng)一個(gè)頁(yè)面發(fā)生一個(gè)行為，如：用戶交互行為或者頁(yè)面跳轉(zhuǎn)時(shí)通常會(huì)發(fā)生數(shù)據(jù)的改變，此時(shí)dispatch函數(shù)會(huì)調(diào)用一個(gè)action，從而使數(shù)據(jù)發(fā)生改變。

** dispatch 函數(shù)** dispatching function 是一個(gè)用于觸發(fā) action 的函數(shù)，action 是改變 State 的唯一途徑，但是它只描述了一個(gè)行為，而 dipatch 可以看作是觸發(fā)這個(gè)行為的方式，而 Reducer 則是描述如何改變數(shù)據(jù)的。 常見的形式如：

dispatch({//dispatch函數(shù)具有type,payload兩個(gè)參數(shù)
type: 'user/add', // type是用于找到與渲染層所連接@connet的Model層。
payload: {}, // payload中存放的是訪問API所需的參數(shù)傳遞給Model。
});

需要注意的是 dispatch 是在組件 connect Models以后，通過 props 傳入的。 const { dispatch } = this.props;

在 Dva 中，可以通過@connect組件來實(shí)現(xiàn)View層與Model層的綁定。 dispatch可以調(diào)用 Model 中的 Reducer 或者 Effects（對(duì)于同步行為則直接調(diào)用Reducer來改變State，如果是異步行為則先觸發(fā)Effects（副作用）然后流向Reducer最終改變State）來改變State。

@connect(({ namespace,loading }) => ({//namespace為Model的一個(gè)屬性用于識(shí)別Model，
其中整個(gè)頁(yè)面的State是由許多Model以namespace為key合成State。
  namespace,
  loading
}))

以上是在頁(yè)面的js文件中所需做的介紹，當(dāng)dispatch調(diào)用刀Model頁(yè)面時(shí)：

Model對(duì)象屬性

在接觸Dva這幾天，使用到了Model對(duì)象所具有以下幾種屬性：

（1）namespace：前面提到過相當(dāng)于全局State中的key。 namespace: 'historyScoreServiceModel'

（2）state：表示 Model 當(dāng)前的狀態(tài)數(shù)據(jù)。

state: {
    reportData: [],
    workData: [],
    report: '',
    reportUrl:''
  },

State State 表示 Model 的狀態(tài)數(shù)據(jù)，通常表現(xiàn)為一個(gè) javascript 對(duì)象（當(dāng)然它可以是任何值）；

操作的時(shí)候每次都要當(dāng)作不可變數(shù)據(jù)來對(duì)待，保證每次都是全新對(duì)象，沒有引用關(guān)系，這樣才能保證 State 的獨(dú)立性，便于測(cè)試和追蹤變化。

（3）effect：在使用過程中其中存放著dispatch所需調(diào)用的函數(shù)。在使用過程中通過yield call函數(shù)調(diào)用了server層發(fā)送Ajax請(qǐng)求的函數(shù)，返回的數(shù)據(jù)。call的第一個(gè)參數(shù)是你要調(diào)用的函數(shù)，第二個(gè)參數(shù)開始是你要傳遞的參數(shù)。然后對(duì)于返回的數(shù)據(jù)通過yield put的type屬性調(diào)用調(diào)用一個(gè)方法并將獲取到的State作為參數(shù)傳入tpye屬性所調(diào)用的函數(shù)中。

  effects: {
  *getHistoryScore({ payload }, { call, put }) {
    const response = yield call(調(diào)用的server層的函數(shù)， 傳入的參數(shù));
    console.log(response)//返回的數(shù)據(jù)
    yield put({
      type: 'save',//調(diào)用的save方法
      payload: {
        reportUrl: response
      },
    });
  },
  },

（4）reducers：用于數(shù)據(jù)合并。

在 dva 中，reducers 聚合積累的結(jié)果是當(dāng)前 model 的 state 對(duì)象。通過 actions 中傳入的值，與當(dāng)前 reducers 中的值進(jìn)行運(yùn)算獲得新的值（也就是新的 state）。

需要注意的是 Reducer 必須是純函數(shù)，所以同樣的輸入必然得到同樣的輸出，它們不應(yīng)該產(chǎn)生任何副作用。

  reducers: {
    save(state, { payload }) {//save函數(shù)傳入兩個(gè)參數(shù)一個(gè)是原State，一個(gè)是新數(shù)據(jù)，save函數(shù)用于將兩者擴(kuò)展合并。
      return {
        ...state,
        ...payload,
      };
    },
  },

Ajax請(qǐng)求是在effect中通過調(diào)用server層的函數(shù)，函數(shù)體中通過ruquest函數(shù)發(fā)送Ajax請(qǐng)求，從ApI獲取數(shù)據(jù)。

至此，數(shù)據(jù)的獲取，到拼接到State最終渲染到頁(yè)面的dva的完整流程就OK了。 現(xiàn)在再來理解一下dva官方文檔的數(shù)據(jù)流程介紹吧。

數(shù)據(jù)流向

數(shù)據(jù)的改變發(fā)生通常是通過用戶交互行為或者瀏覽器行為（如路由跳轉(zhuǎn)等）觸發(fā)的，當(dāng)此類行為會(huì)改變數(shù)據(jù)的時(shí)候可以通過 dispatch 發(fā)起一個(gè) action，如果是同步行為會(huì)直接通過 Reducers 改變 State ，如果是異步行為（副作用）會(huì)先觸發(fā) Effects 然后流向 Reducers 最終改變 State，所以在 dva 中，數(shù)據(jù)流向非常清晰簡(jiǎn)明，并且思路基本跟開源社區(qū)保持一致。

參考文獻(xiàn)：

DvaJS官方文檔：https://dvajs.com/guide/

以上就是React應(yīng)用框架Dva數(shù)據(jù)流向原理總結(jié)分析的詳細(xì)內(nèi)容，更多關(guān)于React框架Dva數(shù)據(jù)流向的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論