栏目分类
您当前的位置:网站首页>新闻详情
浅析dva (史上最全的dva用法及分析)
作者:bb电子-bb电子官网-bb电子网址    发布时间:2020-06-14 20:46:59    来源:bb电子-bb电子官网-bb电子网址    浏览:7
  

  浅析dva (史上最全的dva用法及分析)

  最后发布:2019-06-23 21:44:23

  首发:2019-06-23 21:44:23

  版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。

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

  学过React的童鞋都知道它的技术栈真的很多,所以每当你使用React的时候都需要引入很多的模块,那么dva就是把这些用到的模块集成在一起,形成一定的架构规范。把react常常需要我们必须写的需要用到的引用、代码都集成在了一起,比如一些依赖、必写的一些ReactDOM.render、引入saga、redux控制台工具、provider包裹等都省去不写,大大提高我们的开发效率

  增加了一个 Subscriptions, 用于收集其他来源的 action, eg: 键盘操作、滚动条、websocket、路由等

  输入url渲染对应的组件,该组件通过dispatch去出发action里面的函数,如果是同步的就去进入model的ruducer去修改state,如果是异步比如fetch获取数据就会被effect拦截通过server交互获取数据进而修改state,同样state通过connect将model、状态数据与组件相连

  创建应用,返回 dva 实例。(注:dva 支持多实例)。

  这里可以对以下的hook进行option配置

  在普通的react-redux+redux-saga的项目中,我们首先会建4个文件夹,分别是actions,reducer,saga,组件,还有获取请求数据的services文件夹,同样在入口文件那要引入很多中间件、provider、connect等去将这几个文件夹联系起来,在这里的model以下就将这些集成在了一起,大大减小了开发工作量。

  model 的命名空间,同时也是他在全局 state 上的属性,只能用字符串,不支持通过 . 的方式创建多层命名空间。相当于这个model的key

  在组件里面,通过connect+这个key将想要引入的model加入

  Action 处理器,处理异步动作,基于 Redux-saga 实现。Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。以 key/value 格式定义 effect。用于处理异步操作和业务逻辑,不直接修改 state。由 action 触发,可以触发 action,可以和服务器交互,可以获取全局 state 的数据等等

  Effect 被称为副作用,在我们的应用中,最常见的就是异步操作。它来自于函数编程的概念,之所以叫副作用是因为它使得我们的函数变得不纯,同样的输入不一定获得同样的输出。

  dva 为了控制副作用的操作,底层引入了redux-sagas做异步流程控制,由于采用了generator的相关概念,所以将异步转成同步写法,从而将effects转为纯函数。至于为什么我们这么纠结于 纯函数,如果你想了解更多可以阅读Mostly adequate guide to FP,或者它的中文译本JS函数式编程指南。

  纯函数的好处:将函数抽离出来,与业务不耦合

  启动应用。selector 可选,如果没有 selector 参数,会返回一个返回 JSX 元素的函数。

  若为多接口应用,则在mock文件夹下利用mockjs进行数据模拟,再在配置文件里,进行文件遍历引入

  格式为 JSON,允许注释,布尔类型的配置项默认值均为 false,支持通过fig.js 以编码的方式进行配置,但不推荐,因为 roadhog 本身的 major 或 minor 升级可能会引起兼容问题。

  配置是否多页应用。多页应用会自动提取公共部分为 common.js 和 common.css 。

  如果当前应用中加载了不止一个model,在其中一个的effect里面做select操作,是可以获取另外一个中的state的:

  如果这里是要在组件里面做某些事情,怎么办?

  在getUserConfig的文件夹下,直接通过json内容去获取配置

  在index,js中调用watch.js的方法去监听我们的配置文件,而监听文件夹用的是chokidar这个包

  通过我们的配置文件的配置,以及对环境对判断,动态给classname的后面加上hash值

  从这就可以看出在这里将provider、render等在此编写

  同样,在dva({})初始化的时候,将中间件注册并返回了一个app的对象

  了,就是下面这个美女:先擦一擦哈喇子,我们来介绍一下,

  出自于暴雪出品的一款游戏《守望先锋》,援引官方的角色介绍:D.Va拥有一部强大的机甲,它具有两台全自动的近距离聚变机炮、可以使机甲飞跃敌人或障碍物的推进器、还有可以抵御来自正面的远程攻击的防御矩阵。然后呢,蚂蚁金服的一位架构师sorrycc很迷这位美女,正巧刚开发了一款前端框架没有......

  “一个程序员写了个爬虫程序,整个公司200多人被端了。”“不可能吧!”刚从朋友听到这个消息的时候,我有点不太相信,做为一名程序员来讲,谁还没有写过几段爬虫呢?只因写爬虫程序就被端有点夸张了吧。朋友说,消息很确认并且已经进入审判阶段了。01.对消息进一步确认朋友认识几个律师朋友,和他们有一些业务来往,得知他们想尝试把业务扩展到程序员这个群体。那段时间我刚好离职也有时间,在朋友......

  Java工作4年来应聘要16K最后没要,细节如下。。。

  前奏:今天2B哥和大家分享一位前几天面试的一位应聘者,工作4年26岁,统招本科。以下就是他的简历和面试情况。基本情况:专业技能:1、熟悉Sping了解SpringMVC、SpringBoot、Mybatis等框架、了解SpringCloud微服务2、熟悉常用项目管理工具:SVN、GIT、MAVEN、Jenkins3、熟悉Nginx、tomca......

  中页面过渡效果封装的很好,下面介绍常用的两个 js 库。之前对

  -loading 理解存在误区,认为只要在 index.js 中配置一下就没事了,事实上

  -loading 只是提供当前异步加载方法的状态(异步加载中状态为 true,异步加载完成状态为 false),对应加载样式由各自组件自己控制,如:Antd 中 Table 组件自身的 loading 属性。并添加完整流程示例......

  是基于 redux 最佳实践 实现的 framework,简化使用 redux 和 redux-saga 时很多繁杂的操作 数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发......

  的时候,对于model感觉一片茫然,看不懂不知道是什么意思。在之后的公司一个项目中慢慢的对model有了基本的理解。model.js:model层一般包含几个部分:namespace:model的名字,用来在页面中找到要调用哪一个model,就想id一样。state:用来存放数据的地方。subscriptions:在我看来就是绑定监听页面的,只有进入监听的页面才会......

  ,一个基于Redux的前端应用开发框架,用

  能让我们省去配置项目的一堆麻烦事儿。关于

  的使用和介绍这里就不多说了,官方文档已经讲得很详细了。下面简单结合我自己的实践经历,讲讲

  的框架和由来一图胜前言,首先我们看下传统的React项目的组件结构是怎么样的: 如果amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;TodoList/amp;amp;...