本文适宜学习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地址