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首先是一个基于reduxredux-saga数据流方案,然后为了简化开发体验,dva还额外内置了 react-routerfetch,所以也可以理解为一个轻量级的应用框架。
  • 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: {}, // 需要传递的信息
});

 

©️2020 CSDN 皮肤主题: 黑客帝国 设计师:上身试试 返回首页