关于umi:使用umijs-30搭建React开发框架

本文适宜学习React开发的初学者，通过此框架的应用以利于前期应用antd Pro框架开发更简单的前端页面

Step 1:搭建umi根本框架

umi.js脚手架根本搭建
搭建实现后能够失去如下图所示的我的项目

运行yarn start指令能够在浏览器中看到如图所示的界面

实现以上操作后的问题

1. 我的项目默认应用ts及React Hooks来实现对老手不是很敌对
2. 没有引入dva.js

Step 2:引入dva.js

1.首先找到.umirc.ts文件，在配置中退出如下配置

dva: {
    immer: true,
    hmr: false,
  },

2.在src文件夹下建设 models文件夹，而后在pages文件夹上面建设Demo1文件夹，并在Demo1文件夹中建设models文件夹，建设实现之后如下图所示

更具体的阐明请参考dva配置

Step 3:应用class组件书写新页面

函数组件和Class组件请参考React官网文档：React组件阐明

在src/pages/Demo1文件夹（上文已建设）上面建设index.js文件
其根本代码如下：

import React, {Fragment} from 'react';

class Demo extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    console.log(this.props);
    return (
      <Fragment>
        <div>第一个页面</div>
      </Fragment>
    )
  }
}

export default Demo;

Step 4:定义dva Models并建设连贯

在src/pages/Demo1/models中建设文件DemoModels.js文件

export default {
  namespace: 'basicDataModel',

  state: {
    data: [
      {text: 1, value: 2},
    ],
  },

  effects: {},

  reducers: {
    save(state, action) {
      return {
        ...state,
        ...action.payload,
      };
    },
  },
};

输出以上的代码即建设了名称为basicDataModel的model，
接下来在Step3中建设的index.js中输出如下的代码建设与model的连贯

@connect(({basicDataModel}) => ({
  basicDataModel,
}))

class Demo extends React.PureComponent {

留神@connect为函数装璜必须写在class的后面,在index.js中的render函数中输出如下代码即可打印出在this.props能够拜访basicDataModel

    console.log(this.props);

Step 5:残缺的umi配置(.umirc.ts文件夹中配置)

配置根据请参考

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    { path: '/', component: '@/pages/index' },
  ],
  dva: {
    immer: true,
    hmr: false,
  },
  ignoreMomentLocale: true,
  hash: true,
  targets: {
    ie: 9,
  },
  fastRefresh: {},
});

该脚手架的git地址