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

dva 是一個基于 redux 和 redux-saga 的數據流方案.

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

redux：

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

dva：

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

HelloWorldModel.js

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

這是react組件的創建：

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

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

  render () {
    return (
      
Hello World
    )
  }
}

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

函數式組件

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

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

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

如上述代碼，頁面與model的綁定，是通過connect方法實現的，在connect方法中，入參可以抓取到所有導入的model文件，我們可以在每個組件中（需要關聯model的）“重載”connect方法，只獲取我們當前頁面所需的model，展示在頁面上。而頁面的事件則可以使用dispatch觸發model的Effect事件與服務端交互之后執行reducer，store（model數據）變化后，頁面因為connect了model，相當于訂閱了model的變化，數據流入，頁面更新。

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

dva提供dynamic方法支持動態加載組件和model，

import dynamic from "dva/dynamic";

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

通過動態加載后，build出來的文件將index.js切割成index.js（體積變小） + 1.async.js等等，
但是index.js默認是通過"./"來加載1.async.js的，對于前端靜態資源與服務端應用不在同一臺服務器的情況，如
java boot應用 發布在http://xxx.com/a =》 a.ftl 中引用 dva build之后的靜態資源，而靜態資源發布卻是在另一臺服務器上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中保存著登錄態，路由中使用AuthComponent替換Route，在渲染路由組件的時候就會判斷是否登陸，如果沒有登陸渲染正在登陸loading頁面，等待第三方登陸接口判斷已經登陸，頁面會自動更新為路由組件。
這是第三方登陸，如果是內部登陸使用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:{}});
            }

            })
      })

    },