react+dva+antd+umi项目建立操作流程及知识点总结

0.1 引用

0.1.1 react官网

0.1.2 dva官网

0.1.3 antd-mobile官网

0.1.4 umijs官网

0.1.5 转载文章-umi操作手册

一、what are these?

1.1 react.js

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

1.2 dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

特性

易学易用，仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API

elm 概念，通过 reducers, effects 和 subscriptions 组织 model

插件机制，比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading

支持 HMR，基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

1.3 Ant Design Mobile

一个基于 Preact / React / React Native 的 UI 组件库

1.4 umi

umi是一个基于路由的框架，它支持类似于next.js的常规路由和各种高级路由功能，例如路由级按需加载。借助涵盖从源代码到构建产品的每个生命周期的完整插件系统，umi能够支持各种功能扩展和业务需求。目前，umi在社区和公司内部都有近50多个插件。

umi是Ant Financial的基本前端框架，已直接或间接为600多个应用程序提供服务，包括Java，节点，移动应用程序，混合应用程序，纯前端资产应用程序，CMS应用程序等。umi为我们的内部用户提供了很好的服务，我们希望它也可以为外部用户提供很好的服务。

功能

📦 开箱即用，具有对react，react-router等的内置支持。

🏈Next.js 之类的功能齐全的路由约定，并且还支持配置的路由

🎉 完整的插件系统，涵盖从源代码到生产的每个生命周期

performance 高性能，通过插件支持PWA，路由级代码拆分等

for 支持静态导出，适应各种环境，例如控制台应用程序，移动应用程序，egg，支付宝钱包等

🚄 快速开发的启动，支持支持DLL与配置

🐠 与IE9兼容，基于UMI-插件，polyfills

🍁 支持TypeScript，包括d.ts定义和umi test

🌴 与深度集成DVA，支持鸭子目录，模型的自动加载，代码分裂等

单纯的react.js或dva创建项目流程

二、项目创建流程(umi)

(项目使用umi创建 直接看到2.4即可 其余为记录独立创建方式)

2.1 react

全局安装：

$ npm install -g create-react-app

定位到工作目录下，创建项目：

$ create-react-app projectName

2.2 dva

安装dva-cli

$ npm install dva-cli -g

新建项目：

$ dva new projectName

cd进入项目目录后启动项目

$ npm start

2.3 基于react引入antd

按需加载

$ npm install react-app-rewired customize-cra --save-dev

2.4 umi

全局安装umi

$ yarn global add umi

首先，yarn create umi在新目录中使用。

$ mkdir myapp && cd myapp

$ yarn create umi

选择project。

确认是否要使用TypeScript。

? Do you want to use typescript?(y/N)

然后，选择所需的功能，并检出plugin / umi-plugin-react以获得详细说明。

这里选择antd+dva+dll

然后手动安装依赖项，

$ yarn

最后，使用启动本地开发服务器yarn start。

$ yarn start

三、umi项目架构与tips

3.1项目架构

umi项目架构

3.2 umi路由约定

3.2.1 基础路由

约定 pages 下所有的 js、jsx、ts 和 tsx 文件即路由,umi 会自动生成路由。

3.2.2 动态路由

umi 里约定，带 $ 前缀的目录或文件为动态路由。

3.2.3 可选的动态路由

umi 里约定动态路由如果带 $ 后缀，则为可选动态路由。

3.2.4 嵌套路由

umi 里约定目录下有 _layout.js 时会生成嵌套路由，以 _layout.js 为该目录的 layout 。

3.2.5 404 路由

约定 pages/404.js 为 404 页面，需返回 React 组件。

3.3 UMI通用母版页约定

3.3.1 全局 layout

约定 src/layouts/index.js 为全局路由，返回一个 React 组件，通过 props.children 渲染子组件。

export default function(props) {

return(

    <>

      <Header />

      { props.children }

      <Footer />

    </>

  );

}

3.3.2 不同的全局 layout

你可能需要针对不同路由输出不同的全局 layout，umi 不支持这样的配置，但你仍可以在 layouts/index.js 对 location.path 做区分，渲染不同的 layout 。

比如想要针对 /login 输出简单布局

export default function(props) {

if(props.location.pathname ==='/login') {

return{ props.children }

  }

return(

    <>

      <Header />

      { props.children }

      <Footer />

    </>

  );

}

3.4 UMI-dva-model约定

model 分两类，一是全局 model，二是页面 model。全局 model 存于 /src/models/ 目录，所有页面都可引用；页面 model 不能被其他页面所引用。

规则如下：

src/models/**/*.js 为 global model

src/pages/**/models/**/*.js 为 page model

global model 全量载入，page model 在 production 时按需载入，在 development 时全量载入

page model 会向上查找，比如 page js 为 pages/a/b.js，他的 page model 为 pages/a/b/models/**/*.js + pages/a/models/**/*.js，依次类推

约定 model.js 为单文件 model，解决只有一个 model 时不需要建 models 目录的问题，有 model.js 则不去找 models/**/*.js

3.5 UMI操作相关

3.5.1 页面跳转

// 声明式

import Link from 'umi/link';

export default () => (

      <Link to="/list">Go to list page</Link>

);

// 命令式

import router from 'umi/router';

function goToListPage() {

      router.push('/list');

}

3.5.2  端口配置 .env文件

BROWSER=none

ESLINT=1

PORT=8001

3.6 Tips

src/global.css 此文件不走 css modules，且会自动被引入，可以在这里写全局样式，以及做样式覆盖。