新闻详情
Company News
关于dva框架的二三事
2020-02-24 20:36:55 来源:九五至尊官网-九五至尊vip版-九五至尊手机版网址 浏览次数 33

[摘要] 需要注意的是,上面的项目结构其实是不包含异步处理的,则为了处理异步请求,我们引入了redux-sage,redux-saga会拦截异步action并发起http请求,以发送type=add的异步action网络请求来说,若请求成功,则继续发送一个type=addSuccess的action,若请求失败,则发送一个type=addFail的action。在了解了上面这些概念后,使用了dva后项目的结构也就呼之欲出了:dva本身就是React+Redux+saga的组合,而图中红框的部分就是dva,可以很清楚地看到,dva把store和saga结合成了一个model,同时增加了一个subscription来订阅其他来源的action(例如键盘操作、路由变化)下面简单总结下dva中的一些概念以及自己的一些思考state表示Model的状态数据,通常表现为一个javascript对象(当然它可以是任何值),且需要把这个state当做不可变数据(immutabledata)来处理,保证每次得到的state都是全新对象,新旧对象间不存在引用关系,在检测两个state里的复杂对象时只需要比较其属性的引用即可,这样做的好处是能够提升性能,便于测试和追踪变化(可用来实现神奇又好玩的时光机穿梭神器redux-devtool)。具体到代码里就如下图所示:action是改变state的唯一途径,是一个普通的javascript对象,它描述了一个行为且是改变state的唯一途径。从用户UI操作事件、网络请求回调和WebSocket等其他地方获得的数据,最终都会通过dispatch函数调用一个action,从而改变对应的数据。action必须带有type指明具体的行为名称,且能附带上额外的信息。dispatching是一个用于触发action的函数,且dispatch是在组件connectModels以后,才能通过props传入。action和dispath存在的意义就在于将“如何改变数据”和“改变数据”这两件事分开进行,让我们对如何改变state有更清晰的思路。reducer是描述如何改变数据的,它接受两个参数(之前已经累积运算的结果和当前要被累积的值),并返回一个新的累积结果。通过actions中传入的值,与当前reducers中的值进行运算获得新的值(也就是新的state)。需要注意的是Reducer必须是纯函数,即同样的输入必然得到同样的输出,它们不应该产生任何副作用,或者用更加专业的话说,这个函数是幂等的。effect被称为副作用,在我们的应用中,最常见的就是异步操作(例如网络请求)。它来自于函数式编程的概念,之所以叫副作用是因为同样的输入不一定获得同样的输出。现在函数式编程大行其道的原因主要有以下两点:函数式编程是面向数学的抽象,更加符合人的思维逻辑函数是引用透明且没有副作用,不依赖外部的状态也不改变外部的状态。因为函数是不可变的,则由于多个线程之间不共享状态,不会造成资源争用(Racecondition)来保护可变状态,也就不会出现死锁,这样可以更好地进行并发,尤其是在对称多处理器(SMP)架构下能够更好地利用多个核提供的并行处理能力。要知道现在计算机的计算能力的增加已经不是依靠主频频率的提升,而是更依赖于CPU核心个数的增加,这一点带来的好处是母庸置疑的(如果你想了解更多关于函数式编程的信息,可以阅读JS函数式编程指南。)dva为了控制副作用的操作,引入了redux-sagas做异步流程控制,且因为采用了generator的相关概念,所以能将异步转成同步写法,从而将effects转为纯函数。subscriptions是一种从源获取数据的方法,它来自于elm。react前端框架dva最近正在看dva框架,发现这是一个很好应用于react的框架。众所周知,react的学习成本是较高的,而antd推出的这款框架,大大的降低了react的学习成本。dva简化了...博文来自:zhangrui_web的博客最近的项目是react+dva+atd+webpack的一个后台项目,刚接触dva就感觉很喜欢,很简洁用着很爽。关于使用redux中的一些问题1、文件切换问题、redux的项目通常哟啊分为redu...博文来自:trymybest作者:zhenhua-lee链接:来源:知乎著作权归作者所有。商业转载请联系作者获得授...博文来自:Cool的博客一、dva的核心概念State:一个对象,保存整个应用状态View:React组件构成的视图层Action:一个对象,用来描述UI层事件connect方法:一个函数,绑定State到Viewdi...博文来自:清颖的博客dva框架的中文官网dva中文教程在介绍dva之前,推荐一款网页编程工具,codesandbox,在线编写工具,前提要网速要快,这样就不用在内存中下载模块了,随用随时下载模块,缺点就是网速慢时界面不好...博文来自:zuggs_的博客connect之后在组件初始化(构造函数,或者函数组件)时dispatch,会导致二次渲染,dispatch两次,这时最好时包裹一层组件。将本组件包裹在父组件中,由父组件来发起dispatch。......博文来自:记录成长学习点滴这三者存在父子关系,选择项目,联动突变基因,选择突变基因,联动核苷酸改变实现步骤:(1)onentWillReceiveProps()当接受到新的消息之后,可以获取项目列表(2)....博文来自:weixin_33908217的博客Dva是基于redux、redux-saga和react-router的轻量级前端框架及最佳实践沉淀。博文来自:金溪的博客经过前面四篇的铺垫,终于轮到我们的主角dva了,就是下面这个美女:先擦一擦哈喇子,我们来介绍一下,dva出自于暴雪出品的一款游戏《守望先锋》,援引官方的角色介绍:D.Va拥有一部强大的机甲,它具有两台...博文来自:飞久在上一节实现了简单的性能优化,但是因为需要一次深拷贝和属性对比,性能还是不好,遂这里使用Facebook大神写的immutable.js进行进一步优化immutable.jsJavaScript的...博文来自:我是渣渣当下前端流行的框架,都是用状态来描述界面(state=view),可以说前端开发实际上就是在维护各种状态(state),这已经成为目前前端开发的共识。View=ViewMode...博文来自:weixin_34059951的博客一、前言关于react的性能优化,有很多方面可以去做,而其中避免重复渲染又是比较重要的一点,那么为什么react会重复渲染,我们又该如何避免重复渲染呢,关于这方面官方其实早有说明:避免重复渲染,这...博文来自:weixin_30586085的博客一直在整理dva的运行流程,这次算是比较完善的一个吧,个人理解的dva流程图。根据一个实际项目总结的流程,目录结构大致如下:...博文来自:x先生的博客什么是dvadva首先是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva还额外内置了react-router和fetch,所以也可以理解为一个轻量级的应用框架。学过R...博文来自:黄大琪琪的博客Dva整体理解前言README.md欢迎阅读,本文档将带你了解dva的整体思路。介绍应用dva框架搭建平台,dva是基于redux最佳实践实现的framework,简化使用redux和r...博文来自:annroy的博客从开始学习dva到引入到实际项目中也有几个月的时间,下面分享一下实际的经验,另外也有一些比较含糊或者疑惑的地方,看看大家有没有有些好的思路。dva整体构架比较清晰,但是实际使用的时候,还是需要做很多处...博文来自:蜗牛不会跑这是来自我的星球的一个提问:“C语言本身用什么语言写的?”换个角度来问,其实是:C语言在运行之前,得编译才行,那C语言的编译器从哪里来?用什么语言来写的?如果是用C语......博文来自:码农翻身前言最近一个月沉迷喜马拉雅无法自拔,听相声、段子、每日新闻,还有英语听力,摸鱼学习两不误。上班时候苦于没有桌面端,用网页版有些bug,官方也不搞一个,只好自己动手了。样式参考了一下MoonFM...博文来自:weixin_34392435的博客dva适合有一定react,redux开发经验的人上手,文档很少。。这里记录下一点踩坑点,使用技巧,一些原理。1.dispatch方法的回调函数怎么使用有时候需要返回数据根据数据作进一步处理,有时候这...博文来自:Lawlietdva-boot-admin是一个用React开发的一个企业级中后台管理UI,包含常用的业务,组件,及数据流转方案,前后端分离的开发方式,按业务划分的目录结构,可以大大提高我们的开发效率下面是整体的...博文来自:weixin_34128237的博客dva是单页面应用,虽然有不同的路由页面,但是变化的都是js文件。命令:curl+网址可以查看当前网址的html,如果不同路由显示的都是相同的html文件,说明是单页面1...博文来自:Visonws的博客数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过dispatch发起一个action,如果是同步行为会直接通过Reducers改变...博文前言前端开发桌面程序这个概念已经出现有一段时间了,这项技术也已经走向成熟,Github上nw和光electron的star就差不多有10w颗星了,github也衍生出了很多开源的桌面项目俨然成了一个热...博文来自:心想事成zll_0405:多经历一些事情,总归是有好处的

  需要注意的是,上面的项目结构其实是不包含异步处理的,则为了处理异步请求,我们引入了redux-sage,redux-saga会拦截异步action并发起http请求,以发送type=add的异步action网络请求来说,若请求成功,则继续发送一个type=addSuccess的action,若请求失败,则发送一个type=addFail的action。

  在了解了上面这些概念后,使用了dva后项目的结构也就呼之欲出了:

  dva本身就是React + Redux + saga的组合,而图中红框的部分就是dva,可以很清楚地看到,dva把store和saga结合成了一个model,同时增加了一个subscription来订阅其他来源的action(例如键盘操作、路由变化)

  下面简单总结下dva中的一些概念以及自己的一些思考

  state表示Model的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值),且需要把这个state当做不可变数据(immutable data)来处理,保证每次得到的state都是全新对象,新旧对象间不存在引用关系,在检测两个state里的复杂对象时只需要比较其属性的引用即可,这样做的好处是能够提升性能,便于测试和追踪变化(可用来实现神奇又好玩的时光机穿梭神器redux-devtool)。具体到代码里就如下图所示:

  action是改变state的唯一途径,是一个普通的 javascript 对象,它描述了一个行为且是改变state的唯一途径。从用户UI操作事件、网络请求回调和 WebSocket 等其他地方获得的数据,最终都会通过dispatch函数调用一个action,从而改变对应的数据。action必须带有type指明具体的行为名称,且能附带上额外的信息。

  dispatching是一个用于触发action的函数,且dispatch是在组件connectModels以后,才能通过 props 传入。action和dispath存在的意义就在于将“如何改变数据”和“改变数据”这两件事分开进行,让我们对如何改变state有更清晰的思路。

  reducer是描述如何改变数据的,它接受两个参数(之前已经累积运算的结果和当前要被累积的值),并返回一个新的累积结果。

  通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,即同样的输入必然得到同样的输出,它们不应该产生任何副作用,或者用更加专业的话说,这个函数是幂等的。

  effect被称为副作用,在我们的应用中,最常见的就是异步操作(例如网络请求)。它来自于函数式编程的概念,之所以叫副作用是因为同样的输入不一定获得同样的输出。现在函数式编程大行其道的原因主要有以下两点:

  函数式编程是面向数学的抽象,更加符合人的思维逻辑

  函数是引用透明且没有副作用,不依赖外部的状态也不改变外部的状态。

  因为函数是不可变的,则由于多个线程之间不共享状态,不会造成

  资源争用(Race condition)

  来保护可变状态,也就不会出现死锁,这样可以更好地进行并发,尤其是在对称多处理器(SMP)架构下能够更好地利用多个核提供的并行处理能力。要知道现在计算机的计算能力的增加已经不是依靠主频频率的提升,而是更依赖于CPU核心个数的增加,这一点带来的好处是母庸置疑的

  (如果你想了解更多关于函数式编程的信息,可以阅读JS函数式编程指南。)

  dva 为了控制副作用的操作,引入了redux-sagas做异步流程控制,且因为采用了generator的相关概念,所以能将异步转成同步写法,从而将effects转为纯函数。

  subscriptions是一种从源获取数据的方法,它来自于 elm。

  react前端框架dva最近正在看dva框架,发现这是一个很好应用于react的框架。 众所周知,react的学习成本是较高的,而antd推出的这款框架,大大的降低了react的学习成本。dva简化了...博文来自:zhangrui_web的博客

  最近的项目是react+dva+atd+webpack的一个后台项目,刚接触dva就感觉很喜欢,很简洁用着很爽。关于使用redux中的一些问题1、文件切换问题、redux的项目通常哟啊分为redu...博文来自:try my best

  作者:zhenhua-lee链接:来源:知乎著作权归作者所有。商业转载请联系作者获得授...博文来自:Cool的博客

  一、 dva的核心概念State:一个对象,保存整个应用状态View:React组件构成的视图层Action:一个对象,用来描述 UI 层事件connect方法:一个函数,绑定State到Viewdi...博文来自:清颖的博客

  dva框架的中文官网dva中文教程在介绍dva之前,推荐一款网页编程工具,codesandbox,在线编写工具,前提要网速要快,这样就不用在内存中下载模块了,随用随时下载模块,缺点就是网速慢时界面不好...博文来自:zuggs_的博客

  connect之后在组件初始化(构造函数,或者函数组件)时dispatch,会导致二次渲染,dispatch两次,这时最好时包裹一层组件。将本组件包裹在父组件中,由父组件来发起dispatch。......博文来自:记录成长学习点滴

  这三者存在父子关系,选择项目,联动突变基因,选择突变基因,联动核苷酸改变实现步骤: (1)onentWillReceiveProps()当接受到新的消息之后,可以获取项目列表 (2). ...博文来自:weixin_33908217的博客

  Dva是基于redux、redux-saga和react-router的轻量级前端框架及最佳实践沉淀。博文来自:金溪的博客

  经过前面四篇的铺垫,终于轮到我们的主角dva了,就是下面这个美女:先擦一擦哈喇子,我们来介绍一下,dva出自于暴雪出品的一款游戏《守望先锋》,援引官方的角色介绍:D.Va拥有一部强大的机甲,它具有两台...博文来自:飞久

  在上一节实现了简单的性能优化,但是因为需要一次深拷贝和属性对比,性能还是不好,遂这里使用Facebook大神写的immutable.js进行进一步优化immutable.js JavaScript的...博文来自:我是渣渣

  当下前端流行的框架,都是用状态来描述界面(state = view),可以说前端开发实际上就是在维护各种状态(state),这已经成为目前前端开发的共识。View = ViewMode...博文来自:weixin_34059951的博客

  一、前言关于react的性能优化,有很多方面可以去做,而其中避免重复渲染又是比较重要的一点,那么为什么react会重复渲染,我们又该如何避免重复渲染呢,关于这方面官方其实早有说明:避免重复渲染,这...博文来自:weixin_30586085的博客

  一直在整理dva的运行流程,这次算是比较完善的一个吧,个人理解的dva流程图。 根据一个实际项目总结的流程,目录结构大致如下:...博文来自:x先生的博客

  什么是dvadva首先是一个基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva还额外内置了react-router和fetch,所以也可以理解为一个轻量级的应用框架。学过R...博文来自:黄大琪琪的博客

  Dva整体理解前言README.md欢迎阅读,本文档将带你了解dva的整体思路。介绍应用 dva 框架搭建平台,dva 是基于 redux 最佳实践实现的framework,简化使用 redux 和r...博文来自:annroy的博客

  从开始学习dva到引入到实际项目中也有几个月的时间,下面分享一下实际的经验,另外也有一些比较含糊或者疑惑的地方,看看大家有没有有些好的思路。dva整体构架比较清晰,但是实际使用的时候,还是需要做很多处...博文来自:蜗牛不会跑

  这是来自我的星球的一个提问:“C语言本身用什么语言写的?”换个角度来问,其实是:C语言在运行之前,得编译才行,那C语言的编译器从哪里来? 用什么语言来写的?如果是用C语......博文来自:码农翻身

  前言最近一个月沉迷喜马拉雅无法自拔,听相声、段子、每日新闻,还有英语听力,摸鱼学习两不误。上班时候苦于没有桌面端,用网页版有些 bug,官方也不搞一个,只好自己动手了。样式参考了一下 Moon FM ...博文来自:weixin_34392435的博客

  dva适合有一定react,redux开发经验的人上手,文档很少。。这里记录下一点踩坑点,使用技巧,一些原理。1.dispatch方法的回调函数怎么使用有时候需要返回数据根据数据作进一步处理,有时候这...博文来自:Lawliet

  dva-boot-admin 是一个用React开发的一个企业级中后台管理UI,包含常用的业务,组件,及数据流转方案,前后端分离的开发方式,按业务划分的目录结构,可以大大提高我们的开发效率下面是整体的...博文来自:weixin_34128237的博客

  dva是单页面应用,虽然有不同的路由页面,但是变化的都是js文件。   命令:curl  + 网址         可以查看当前网址的html,如果不同路由显示的都是相同的html文件,说明是单页面1...博文来自:Visonws的博客

  数据流向数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过dispatch发起一个 action,如果是同步行为会直接通过Reducers改变...博文

  前言前端开发桌面程序这个概念已经出现有一段时间了,这项技术也已经走向成熟,Github上nw和光electron的star就差不多有10w颗星了,github也衍生出了很多开源的桌面项目俨然成了一个热...博文来自:心想事成

  zll_0405:多经历一些事情,总归是有好处的

新葡京头条 新闻中心
友情链接