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 (
      <Layout style={{ minHeight: '100vh' }}>
        <Sider
          collapsible
          collapsed={this.state.collapsed}
          onCollapse={this.onCollapse}
        >
          <div className={styles.logo} />
          <MenuComponent />
        </Sider>
        <Layout>
          <Header style={{ background: '#fff', padding: 0 }} />
          <Content style={{ margin: '0 16px' }}>
            <Breadcrumb style={{ margin: '16px 0' }}>
              <Breadcrumb.Item>User</Breadcrumb.Item>
              <Breadcrumb.Item>Bill</Breadcrumb.Item>
            </Breadcrumb>
            <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
              {this.props.children}
            </div>
          </Content>
          <Footer style={{ textAlign: 'center' }}>
            Ant Design ©2018 Created by Ant UED
          </Footer>
        </Layout>
      </Layout>
    );
  }
}
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 <SubMenu
          key={d.id}
          title={<span><Icon type={d.icon} /><span>{d.name}</span></span>}
        >
          {this.renderMenu(d.children)}
        </SubMenu>
      }
      return (
          <Menu.Item
            key={d.id}
            onClick={() => {this.link(d.url)}}
          >
            <Icon type={d.icon} />
            <span>{d.name}</span>
        </Menu.Item>
      )
    });
  }
  render() {
    const { menu } = this.props;
    return (
      <Menu theme='dark'
        defaultSelectedKeys={['1']}
        mode='inline'>
        {
          this.renderMenu(menu)
        }
      </Menu>
    );
  }
}
export default MenuComponent;

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

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

结束语

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

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

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

*umi 官网

*dva 官网