01 基於umi搭建React快速開發框架

時間 2019-12-08

標籤基於 umi 搭建 react 快速開發框架欄目 React 简体版

原文原文鏈接

介紹

基於umi搭建一個快速開發框架，react 應用框架。umi 以路由爲基礎的，支持類 next.js 的約定式路由，以及各類進階的路由功能，並以此進行功能擴展，好比支持路由級的按需加載。
咱們會在基於umi的基礎上，開發出一個框架通用功能和業務功能
框架功能列表css

全局layout
權限管理
封裝列表增刪改查
國際化
集成 g2 chart圖表
集成 socket.io
....(後續補充)

業務功能html

用戶管理
....(後續補充)

建立項目

umi 提供了腳手架供咱們快速建立項目。參考umi腳手架建立項目
包管理器咱們推薦用yarn來替換npm,yarn在包安裝速度上確實提高很多react

1.在你的空目錄下執行，git

yarn create umi

咱們須要選擇 antd,code splitting, dll, hard source

2.安裝依賴github

yarn

3.啓動本地開發npm

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.jsantd

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的以下。app

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數據作渲染。

咱們刷新瀏覽器看到菜單已經正確渲染了。