用umi与dva构建react应用

Umi是什么

umi是以路由为基础，同时支持配置式路由和约定路由，保证路由的功能完备，并且进行功能扩展。

umi构建项目的结构

pages目录：pages/* 文件夹的文件层级结构来生成路由表。配置路由（redirect、layout）或约定路由 假设 pages 目录结构如下：

+layputs/
  + index.tsx
+ pages/
  + users/
    - index.tsx
  - index.tsx

那么，会自动生成路由配置如下：

[
    path: '/', component: '@/layouts/index.tsx' ,
    routes:[
     { path: '', component: '@/pages/index.tsx' },
     { path: 'users/', component: '@/pages/users/index.tsx' },
    ]
  
]

使用约定式路由时： 1、约定 src/pages 下所有的 (j|t)sx? 文件即路由。 2、约定 src/layouts/index.tsx 为全局路由。返回一个 React 组件，并通过 <Outlet /> 渲染嵌套路由。

umi/max 数据流

约定可以在 src/models, src/pages/xxxx/models/目录中，和 src/pages/xxxx/model.{js,jsx,ts,tsx} 文件引入 Model 文件。

dva是什么

为什么需要状态管理

在组件中通过组件自身的 state 加上父组件通过 props 状态的传递就能够满足应用数据管理的需求。但是当应用膨胀到一定程度后就会导致组件内维护的状态非常的复杂，加上组件之间状态的传递，很容易导致数据管理混乱。很小的修改都可能导致难以预料的副作用。 因此，我们需要构建纯净的ui组件，除了渲染逻辑，不再杂糅其他操作数据（比如网络请求） 我们要把渲染无关的业务抽离出来，形成独立的层（src/model），让所有组件降级为无状态组件，仅仅依靠props渲染。，ui层就专注做ui渲染

数据统一在 src/models 中的 model 管理，组件内尽可能的不去维护数据，而是通过 connect 去关联 model 中的数据。页面有操作的时候则触发一个 action 去请求后端接口以及修改 model 中的数据，将业务逻辑分离到一个环形的闭环中，使得数据在其中单向流动。让应用更好维护。

model怎么管理

state中放管理数据 effects：异步请求 reducers：对state中的数据进行修改

import { queryUsers, queryUser } from '../../services/user';


export default {
  state: {
    user: {},
  },


  effects: {
    *queryUser({ payload }, { call, put }) {
      const { data } = yield call(queryUser, payload);
      yield put({ type: 'queryUserSuccess', payload: data });
    },
  },


  reducers: {
    queryUserSuccess(state, { payload }) {
      return {
        ...state,
        user: payload,
      };
    },
  },


  test(state) {
    console.log('test');
    return state;
  },
};

在组件中使用

新建完成 model 之后你就可以在组件中通过 ES6 的 Decorator 方便的把 model 和组件 connect 到一起。然后你就可以在组件中通过this.props.[modelName]的方式来访问 model 中的数据了。 在组件中dispatch：connect 方法同时也会添加 dispatch 到 this.props 上，你可以在用户触发某个事件的时候调用它来触发 model 中的 effects 或者 reducer 来修改 model 中的数据。