使用umi.js 3.0搭建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地址