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

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

因?yàn)樗?jiǎn)化了react引入redux的過(guò)程。

redux：

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

dva：

開(kāi)發(fā)時(shí)，把 store 及 saga 統(tǒng)一為一個(gè) model 的概念, 寫(xiě)在一個(gè) js 文件里面，分類清晰。
增加了一個(gè) Subscriptions, 用于收集其他來(lái)源的 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);

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

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

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

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

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

import dynamic from "dva/dynamic";

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

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

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

1.是否登陸
在GlobalModel中保存著登錄態(tài)，路由中使用AuthComponent替換Route，在渲染路由組件的時(shí)候就會(huì)判斷是否登陸，如果沒(méi)有登陸渲染正在登陸loading頁(yè)面，等待第三方登陸接口判斷已經(jīng)登陸，頁(yè)面會(huì)自動(dòng)更新為路由組件。
這是第三方登陸，如果是內(nèi)部登陸使用react-router跳轉(zhuǎn)。
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") ); //沒(méi)有權(quán)限
          }
        }else{
          window.location.href = getLoginUrl();
        }
    },

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

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

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

            })
      })

    },