React、umi和dva之间的关系

前言

react（https://react.docschina.org/）

umi--路由配置（https://umijs.org/）
dva--数据流方案（https://dvajs.com/guide/）

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

Antd pro（https://pro.ant.design/docs/getting-started-cn）集成了umi、dva、antd的完整前端脚手架

关于UmiJS框架

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

Umi特性：

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

注意：有很强的 webpack 自定义需求和主观意愿或者需要选择不同的路由方案

 

关于Dva框架

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

Dva特性：

• 易学易用，仅有 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

dva数据流向：

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

 

核心概念:

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

State 和 View:

State 是储存数据的地方，收到 Action 以后，会更新数据。

View 就是 React 组件构成的 UI 层，从 State 取数据后，渲染成 HTML 代码。只要 State 有变化，View 就会自动更新。

Action:

Action 是用来描述 UI 层事件的一个对象。

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

connect 方法:

connect 是一个函数，绑定 State 到 View。

connect 方法返回的也是一个 React 组件，通常称为容器组件。因为它是原始 UI 组件的容器，即在外面包了一层 State。

connect 方法传入的第一个参数是 mapStateToProps 函数，mapStateToProps 函数会返回一个对象，用于建立 State 到 Props 的映射关系。

dispatch 方法:

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

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