01 基于umi搭建React快速开发框架

介绍

基于umi搭建一个快速开发框架，react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。
我们会在基于umi的基础上，开发出一个框架通用功能和业务功能
框架功能列表

• 全局layout
• 权限管理
• 封装列表增删改查
• 国际化
• 集成 g2 chart图表
• 集成 socket.io
• ....(后续补充)

业务功能

• 用户管理
• ....(后续补充)

创建项目

umi 提供了脚手架供我们快速创建项目。参考umi脚手架创建项目
包管理器我们推荐用yarn来替换npm,yarn在包安装速度上确实提升不少

1.在你的空目录下执行，

yarn create umi

我们需要选择 antd,code splitting, dll, hard source

2.安装依赖

yarn

3.启动本地开发

yarn start

构建全局layout和菜单

umi规定 src/layouts 目录下存放我们全局layout组件, 在index.js中加入代码如下

class BaseLayout extends React.Component {
  state = {
    collapsed: false,
  };

  onCollapse = (collapsed) => {
    console.log(collapsed);
    this.setState({ collapsed });
  }

  render() {
    return (
      
        
          

          
        
        
          

          
            
              User
              Bill
            
            

              {this.props.children}
            
          
          

            Ant Design ©2018 Created by Ant UED
          
        
      
    );
  }
}
export default BaseLayout;

layout 组件需要 MenuComponent,
在构建组件之前我们需要先mock菜单数据，umi支持mock，我们在mock文件下添加 auth.js

const menu = [
  {
    id: 1,
    name: '概览',
    icon: 'dashboard',
    url: '/dashboard',
  },
  {
    id: 2,
    name: '系统管理',
    icon: 'setting',
    url: '/system',
    children: [
      {
        id: 21,
        name: '用户管理',
        icon: 'user',
        url: '/system/user',
      }
    ]
  },
];

menu数据是树形结构，在项目当中，可以构造放到前台，也可以让后台小伙伴们返回。比较灵活，我们基于数据去做渲染就行。
还有一个很重要的概念，umi也集成了dva，我们的src/models路径下添加auth.js的如下。

import { getMenu } from '../services/auth';
export default {
  namespace: 'auth',

  state: {
    menu: []
  },

  effects: {
    *getMenu(_, { put, select, call }) {
      const menu = yield call(getMenu);
      yield put({
        type: 'setMenu',
        payload: menu,
      });
    },
  },

  reducers: {
    setMenu(state, { payload }) {
      return {
        ...state,
        menu: payload,
      };
    },
  },
};

基础工作已经完成。就可以来构建MenuComponent组件。

@connect(({auth}) => {
  return {
    menu: auth.menu,
  }
})
class MenuComponent extends React.Component {

  componentDidMount() {
    // 获取 menu 数据
    this.props.dispatch({
      type: 'auth/getMenu',
    })
  }

  link = (url) => {
    router.push(url);
  }

  renderMenu = (data) => {
    return data && data.map(d => {
      if (d.children && d.children.length > 0) {
        return {d.name}}
        >
          {this.renderMenu(d.children)}
        
      }
      return (
           {this.link(d.url)}}
          >
            
            {d.name}
        
      )
    });
  }

  render() {
    const { menu } = this.props;
    return (
      
        {
          this.renderMenu(menu)
        }
      
    );
  }
}

export default MenuComponent;

总的来说，menu组件会访问会调用saga effect,发出异步请求获取数据，然后通过dva connect获取menu数据做渲染。

我们刷新浏览器看到菜单已经正确渲染了。

结束语

这是开始的第一步，也欢迎大家监督，接下来会逐步把上面提到的功能完善起来。代码已放到github上，大家可以自行查看umi-react。

我建了一个QQ群，大家加进来，可以一起交流。群号 787846148

对上面有些内容不理解的同学参考如下内容
umi 官网
dva 官网

转载于:https://www.cnblogs.com/qiaojie/p/9598886.html