关于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 地址