首页 > 其他分享 >React + Dva + Antd + Umi 快速入门

React + Dva + Antd + Umi 快速入门

时间:2022-09-03 01:33:24浏览次数:71  
标签:框架 dva Dva React Antd Umi

 

最近一个项目用了React + Dva + Antd + Umi 技术栈

 

基础框架概念

React
前端三大框架之一。
Dva
由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:”dva 是 react 和 redux 的最佳实践”。
Antd
是阿里的一套开箱即用的中台前端/设计解决方案,UI框架。
Umi
一套可插拔的企业级 react 应用框架,同样由dva作者 sorrycc 完成。他在Umi中引入了 UI 工具 antd,打包工具 roadhog,路由 react-router和状态管理器 dva,做到了可插拔机制

 

Dva 初实践

一般来说,可以分为主要的三个部分,modelsservices 和 views。其中,views负责页面上的展示,这个不做赘述;services里面主要写一些请求后台接口的方法;models是其中最重要的概念,这里存放了各种数据,并对数据进行相应的交互。

 

Dva 数据流向

总的来说如下:View层操作 –> 触发models层effect中方法 –> 触发service层请求,获取后台数据 –> 触发model层处理相应数据的方法,存储至reducer中 –> 更新model层中state –> 触发view层的render方法进行重新渲染 –> 页面更新

如图所示

 



参考网址

https://blog.csdn.net/SCU_Cindy/article/details/82432971

 

参考资源

 

标签:框架,dva,Dva,React,Antd,Umi
From: https://www.cnblogs.com/miangao/p/16651820.html

相关文章

  • react-native 类组件调用函数组件里面的方法
    父组件class类组件,关键代码我用红色部部分标记importReactfrom"react";import{View,Text}from"react-native";importHomeModalChilderfrom"../../compon......
  • react-native 实现阴影效果
    github地址: https://github.com/SrBrahma/react-native-shadow-2安装: yarnaddreact-native-svgreact-native-shadow-2使用: import{Shadow}from'react-na......
  • 只需 5 分钟即可部署您的第一个 Vite React 项目
    只需5分钟即可部署您的第一个ViteReact项目介绍希望你喜欢阅读我的初学者文章——“了解ViteJs的基础知识以及为什么要在项目中使用它。”如果没有,我假设你已......
  • react生命周期
    -生命周期回调函数----生命周期钩子函数-----生命周期函数<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"......
  • react 启动报错 ERROR in ./node_modules/fs-extra/lib/copy/copy-sync.js 5:13-28
    项目运行好好的,然后就报一堆错误起初我以为我安装了依赖倒置的问题,后来我只输出helloworld都出错。折腾两晚上。。。还是度娘帮了我Compiledwithproblems:XERROR......
  • React HTML 编辑器:没你想的那么难
    ReactHTML编辑器:没你想的那么难Photoby莫里茨金德勒on不飞溅Web开发人员在开发Web项目时很少使用单一工具。选择正确的工具和框架组合以创建出色的最终结果......
  • 5 个加速 React 开发的工具
    5个加速React开发的工具React工具、技巧和最佳实践将帮助您更快地构建应用程序Original照片by凯利@PexelsReact没有为样式、数据获取、路由或动画规定惯用的......
  • React HTML 编辑器:没你想的那么难
    ReactHTML编辑器:没你想的那么难Photoby莫里茨金德勒on不飞溅Web开发人员在开发Web项目时很少使用单一工具。选择正确的工具和框架组合以创建出色的最终结果......
  • React报错之Rendered more hooks than during the previous render
    正文从这开始~总览当我们有条件地调用一个钩子或在所有钩子运行之前提前返回时,会产生"Renderedmorehooksthanduringthepreviousrender"错误。为了解决该错误,将所......
  • webpack css-loader模块化导致的antd样式不好用解决方案
    css-loader模块化会导致antd样式文件无效,解决的方式就是排除node_modules下的目标文件就可以如果你用的less就可以按以下方式来配置{test:/\.less$/,inclu......