[JavaScript知识库]利用umi.js 3.5+Dva.js 搭建React框架

搭建umi基本框架

umi.js脚手架基本搭建
搭建完成后得到下图所示目录结构：

使用命令启动项目

yarn start

1. 因为项目默认使用ts和React Hooks
2. 没有引入 Dva.js

引入dva.js

找到项目目录下的 .umirc.ts 文件，加入如下配置项

 dva: {
    immer: true, // 表示是否启用 immer 以方便修改 reducer
    hmr: false, // 表示是否启用 dva model 的热更新
  },

在src下新建models文件夹，在pages下新建Demo1文件夹，在Demo1中新建models文件夹，如下图所示：

class组件写新页面

在上文中新建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>开始配置dva.js </div>
            </Fragment>
        )
    }
}

export default Demo;

定义Dva Models并建立连接

src/pages/Demo1/models 新建文件 DemoModel.js

export default {
    namespace: 'firstDemoModel',

    state: {
        data: [
            { text: 'fighting', value: 'nine' },
        ],
    },

    effects: {},

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

输入以上的代码即建立了名称为firstDemoModel的model，
接下来在上文index.js中输入如下的代码建立与model的连接

import {connect} from 'dva'
@connect(({ firstDemoModel}) => ({
    firstDemoModel,
}))

class Demo extends React.PureComponent {

@connect为函数装饰必须写在class的前面,在index.js中的render函数中输入如下代码即可打印出在this.props可以访问basicDataModel

完整的Umi配置

修改 .umirc.ts文件夹中配置如下所示

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: { //设置 node_modules 目录下依赖文件的编译方式
    type: 'none',
  },
  routes: [ //umi 的路由基于 react-router@5 实现，配置和 react-router 基本一致
    { path: '/', component: '@/pages/index' },
  ],
  fastRefresh: {}, //快速刷新（Fast Refresh），开发时可以保持组件状态，同时编辑提供即时反馈
  ignoreMomentLocale: true, //忽略 moment 的 locale 文件，用于减少尺寸
  hash: true, //配置是否让生成的文件包含 hash 后缀，通常用于增量发布和避免浏览器加载缓存
  targets: { //配置需要兼容的浏览器最低版本，会自动引入 polyfill 和做语法转换
    ie: 9,
  },
  dva: {
    immer: true,
    hmr: false,
  },
});

以上就是利用UmiJs 搭建React框架并配置Dva.js的全部内容
本项目的Gitee地址

参考文档

UmiJs整合 Dva数据流配置
React 官方文档
UmiJs配置