React、Umi、Dva、AntD Pro之间的关系---kalrry

前言

Win配置记录
Mac配置记录

一、官方链接

React
Umi–路由配置
Dva–数据流方案
Ant Design Pro
集成了umi、dva、antd的完整前端脚手架

二、共同点

Umi和Dva都是基于React的框架，Umi主要以路由为主，Dva主要管理数据流。

三、UmiJS框架

1、简介

umi是一个可插拔的企业级react应用框架。umi以路由为基础的，支持类next.js的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。

2、Umi特性：

1. 可扩展
   Umi 实现了完整的生命周期，并使其插件化，Umi 内部功能也全由插件完成。此外还支持插件和插件集，以满足功能和垂直域的分层需求。
2. 开箱即用
   Umi 内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常 80% 的开发需求。
3. 大量自研
   包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等，满足日常项目的周边需求。
4. 完备路由
   同时支持配置式路由和约定式路由，同时保持功能的完备性，比如动态路由、嵌套路由、权限路由等等。
5. 面向未来
   在满足需求的同时，我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。
   注意：有很强的 webpack 自定义需求和主观意愿或者需要选择不同的路由方案

四、关于Dva框架

1、简介

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

2、Dva特性：

1. 易学易用
   仅有 6 个 api，对 redux 用户尤其友好，配合 umi 使用后更是降低为 0 API
2. elm 概念
   通过 reducers, effects 和 subscriptions 组织 model
3. 插件机制
   比如 dva-loading 可以自动处理 loading 状态，不用一遍遍地写 showLoading 和 hideLoading
4. 支持 HMR
   基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

3、dva数据流向

数据的改变发生通常是通过用户交互行为或者浏览器行为（如路由跳转等）触发的，当此类行为会改变数据的时候可以通过 dispatch 发起一个 action，如果是同步行为会直接通过 Reducers 改变 State ，如果是异步行为（副作用）会先触发 Effects 然后流向 Reducers 最终改变 State，所以在 dva 中，数据流向非常清晰简明，并且思路基本跟开源社区保持一致

4、核心概念:

State：一个对象，保存整个应用状态
View：React 组件构成的视图层
Action：一个对象，描述事件
connect 方法：一个函数，绑定 State 到 View
dispatch 方法：一个函数，发送 Action 到 State

1. State 和 View:
   State 是储存数据的地方，收到 Action 以后，会更新数据。
   View 就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化，View 就会自动更新。

2. Action:
   Action 是用来描述 UI 层事件的一个对象

dispatch({
  type: 'add',
});

3. connect 方法:
   connect 是一个函数，绑定 State 到 View。
   connect方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。
   connect 方法传入的第一个参数是 mapStateToProps 函数，mapStateToProps 函数会返回一个对象，用于建立 State 到 Props 的映射关系。

4. dispatch 方法:
   dispatch 是一个函数方法，用来将 Action 发送给 State。

dispatch({
  type: 'user/add', // 如果在 model 外调用，需要添加 namespace
  payload: {}, // 需要传递的信息
});