React 16.x折腾记：UmiJS 2.x + antd 重写后台管理系统

2023-11-19 04:15:48

前言

最近在重写公司的后台管理系统，原来的系统是使用jQuery+Bootstrap开发的，已经有好几年了，随着业务的发展，系统变得越来越复杂，维护成本也越来越高。于是决定重写系统，使用更现代化的框架和技术栈。

经过一番调研，选择了React 16.x、UmiJS 2.x和antd作为新的技术栈。React 16.x是一个非常流行的前端框架，具有高性能、组件化和易于学习等优点。UmiJS 2.x是一个基于Ant Design的企业级前端应用框架，提供了开箱即用的脚手架、路由、状态管理、国际化等功能，极大地提高了开发效率。antd是一个基于Ant Design的设计语言，提供了丰富的UI组件库，能够快速构建出美观、易用的用户界面。

重写过程中的问题及解决方法

在重写系统的过程中，遇到了不少问题，也积累了一些经验，这里分享给大家。

1. 路由配置问题

UmiJS 2.x的路由配置与传统的路由框架不同，它使用的是基于约定式路由的配置方式，这对于新手来说可能有点难以理解。我花了点时间才弄明白如何配置路由，并在实践中积累了一些经验，现在我可以轻松地配置路由了。

2. 状态管理问题

React 16.x使用的是函数式组件，没有状态管理的概念，这与传统的类组件不同。一开始我对如何管理状态感到困惑，后来了解到可以使用Redux或Mobx来管理状态。我选择了Redux，并在项目中使用它来管理状态。

3. UI组件库问题

antd是一个非常强大的UI组件库，提供了丰富的组件，能够快速构建出美观、易用的用户界面。但是，在使用antd的过程中，我也遇到了一些问题，比如某些组件的样式不符合我的需求，需要进行定制。我通过查阅文档和社区论坛，找到了解决方法。

代码示例

以下是一些代码示例：

// 路由配置
export default {
  routes: [
    {
      path: '/',
      component: '@/pages/index',
    },
    {
      path: '/login',
      component: '@/pages/login',
    },
    {
      path: '/admin',
      component: '@/pages/admin',
      routes: [
        {
          path: '/admin/users',
          component: '@/pages/admin/users',
        },
        {
          path: '/admin/roles',
          component: '@/pages/admin/roles',
        },
      ],
    },
  ],
};

// 状态管理
const store = createStore(reducer);

export default function App() {
  return (
    <Provider store={store}>
      <Router history={createBrowserHistory()}>
        <Switch>
          <Route path="/" exact component={IndexPage} />
          <Route path="/login" exact component={LoginPage} />
          <Route path="/admin" component={AdminPage} />
        </Switch>
      </Router>
    </Provider>
  );
}

// UI组件库
import { Button, Input, Table } from 'antd';

const App = () => {
  return (
    <div>
      <Button type="primary">按钮</Button>
      <Input placeholder="请输入" />
      <Table dataSource={data} columns={columns} />
    </div>
  );
};