摘要：傳統(tǒng)與對比開發(fā)時，我們需要，等文件，并且需要自行分類，不太清晰。因為的數(shù)據(jù)流是單向的，用戶行為視圖變化視圖更新，組件可以在鉤子中決定是否允許當前組件內(nèi)的數(shù)據(jù)流動，函數(shù)式組件只能被動接收數(shù)據(jù)流動。這是第三方登陸，如果是內(nèi)部登陸使用跳轉。

dva 是一個基于 redux 和 redux-saga 的數(shù)據(jù)流方案.

因為它簡化了react引入redux的過程。

redux：

開發(fā)時，我們需要action，reducer等文件，并且需要自行分類，不太清晰。

dva：

開發(fā)時，把 store 及 saga 統(tǒng)一為一個 model 的概念, 寫在一個 js 文件里面，分類清晰。
增加了一個 Subscriptions, 用于收集其他來源的 action。

HelloWorldModel.js

export default {
  namespace: "HelloWorldModel",
  state: {str:"hi"},
  reducers: {
    
  },
};

這是react組件的創(chuàng)建：

class HelloWorld extends Component {
  constructor() {
    super()
    this.state = {  }
  }

  sayHi () {
    alert("this.props.HelloWorldModel.str)
  }

  render () {
    return (
      
Hello World
    )
  }
}

export default connect(({ HelloWorldModel }) => ({
  HelloWorldModel,
}))(HelloWorld);

函數(shù)式組件

const HelloWorld = (props) => {
  const sayHi = (event) => alert(this.props.HelloWorldModel.str)
  return (
    
Hello World
  )
}
export default connect(({ HelloWorldModel }) => ({
  HelloWorldModel,
}))(HelloWorld);

頁面的數(shù)據(jù)分為2大類：
1.頁面屬性：Modal打開或者關閉，與用戶行為相關，與后臺數(shù)據(jù)無關
2.頁面狀態(tài)：Table展示的數(shù)據(jù)內(nèi)容，與用戶行為無關，與后臺數(shù)據(jù)相關
我通常在react組件中直接使用state作為頁面屬性，將頁面狀態(tài)存在model中，
而函數(shù)式組件，則將頁面屬性和狀態(tài)全部存放在model中。

上面是react組件和函數(shù)式組件的寫法區(qū)別，
通過react組件寫法聲明的組件繼承了“react.Component”的一些屬性及方法，如生命周期鉤子函數(shù)等。
而函數(shù)式組件只是個返回dom節(jié)點的方法，所以不具備生命周期函數(shù)。
因為dva的數(shù)據(jù)流是單向的，
用戶行為=》視圖=》model.Effect=>model.Reducer=>store變化=>視圖更新，
react組件可以在“componentWillReceiveProps”鉤子中決定是否允許當前組件內(nèi)的數(shù)據(jù)流動，
函數(shù)式組件只能被動接收數(shù)據(jù)流動。

如上述代碼，頁面與model的綁定，是通過connect方法實現(xiàn)的，在connect方法中，入?yún)⒖梢宰ト〉剿袑氲膍odel文件，我們可以在每個組件中（需要關聯(lián)model的）“重載”connect方法，只獲取我們當前頁面所需的model，展示在頁面上。而頁面的事件則可以使用dispatch觸發(fā)model的Effect事件與服務端交互之后執(zhí)行reducer，store（model數(shù)據(jù)）變化后，頁面因為connect了model，相當于訂閱了model的變化，數(shù)據(jù)流入，頁面更新。

一些公用的狀態(tài)是可以抽離到同一個model中的，如登錄態(tài)，上一次查詢參數(shù)等。

dva提供dynamic方法支持動態(tài)加載組件和model，

import dynamic from "dva/dynamic";

const UserPageComponent = dynamic({
  app,
  models: () => [
    import("./models/users"),
  ],
  component: () => import("./routes/UserPage"),
});

通過動態(tài)加載后，build出來的文件將index.js切割成index.js（體積變小） + 1.async.js等等，
但是index.js默認是通過"./"來加載1.async.js的，對于前端靜態(tài)資源與服務端應用不在同一臺服務器的情況，如
java boot應用 發(fā)布在http://xxx.com/a =》 a.ftl 中引用 dva build之后的靜態(tài)資源，而靜態(tài)資源發(fā)布卻是在另一臺服務器上http://zzz.com/dvaBuild/dist,
index.js還是去訪問默認的"./1.async.js" 其實訪問的是http://xxx.com/a/1.async.js,...。
可以直接在頁面script標簽中，

window.__webpack_public_path__ = "http://zzz.com/dvaBuild/dist";

1.是否登陸
在GlobalModel中保存著登錄態(tài)，路由中使用AuthComponent替換Route，在渲染路由組件的時候就會判斷是否登陸，如果沒有登陸渲染正在登陸loading頁面，等待第三方登陸接口判斷已經(jīng)登陸，頁面會自動更新為路由組件。
這是第三方登陸，如果是內(nèi)部登陸使用react-router跳轉。
AuthComponent

@connect(({GlobalModel}) => GlobalModel)
export default class AuthComponent extends PureComponent {
  render() {
    const { component: Component, isLogin, ...rest } = this.props;
    return  (
      
        isLogin == 1 ? (
          
        ) : (
          
        )
      }
    />
    )
  }
}

GlobalModel

effects: {
    *CheckLogin({payload,callback}, {call,select,put}) {
        const loginfoResult = yield call(getLoginInfo);
        if(loginfoResult && loginfoResult.ResponseStatus && loginfoResult.ResponseStatus.Ack == "Success" && loginfoResult.userBasicInfoDTO){
          if(loginfoResult.userBasicInfoDTO && loginfoResult.userBasicInfoDTO.userAccount && checkPermission(loginfoResult.userBasicInfoDTO.userAccount)){
            yield put({type:"save",loginInfo:loginfoResult})
            callback();
          }else{
            yield put( routerRedux.push("/NoPermission") ); //沒有權限
          }
        }else{
          window.location.href = getLoginUrl();
        }
    },

需要在各個路由頁面綁定的model的路由切換訂閱方法中做登陸判斷，
頁面切換就要判斷是否登陸或鑒權

subscriptions: {
    setup({ dispatch, history }) {  // eslint-disable-line
      return history.listen((location) => {
        dispatch({
          type: "GlobalModel/onShow",
          callback: () => {

                dispatch({type:"BaseInfoQuery",payload:{}});
            }

            })
      })

    },