基于dva的表单类页面复用思考

最新推荐文章于 2021-11-27 12:17:12 发布
最新推荐文章于 2021-11-27 12:17:12 发布
阅读量1.9k 收藏
点赞数
分类专栏： 代码优化思考 ----------React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/young_Emily/article/details/79431206
版权
本文探讨了在基于dva的金融管理系统中遇到的表单类页面代码复用问题。作者分析了现有代码的问题，提出通过高阶组件和公用model解决复用，讨论了不同思路及其实现难点，最终实现了最小改动的优化方案，解决了无状态组件的数据订阅和组件挂载监听问题。
摘要由CSDN通过智能技术生成

背景

新学期新开始，前几天老师让我和一个学弟一起接手实验室新接的项目，老师已经把基本框架搭好了，项目是基于dva的金融类管理系统（所以表单类页面又来了）

现有代码的问题

这个管理系统涉及到很多列表类页面，而当我们将model层以视图划分时，会发现现有代码有很多很多类似的。而且，为了保持代码风格差不多，当我加入项目时，先尝试写了一个基本curd功能的表单页，发现写的很痛苦。因为，差不多只能按照他的模式来写，整个编码体验就像是戴着脚链跳舞。
而更让人难过的是，只要是基本crud功能的页面，捎带夸张一点的说，即使你完全不会dva只要按着相应流程复制粘贴代码都可以实现一个基本crud页面。

talk is cheap ，show me the code
// 后端接口
这里写图片描述
// 按照接口写好相应api

最低0.47元/天 解锁文章
young_Emily
关注
专栏目录
dva 中进行页面复用实践总结
weixin_34361881的博客
12-28 359
2019独角兽企业重金招聘Python工程师标准>>> ...
新手理解Dva model
weixin_42084197的博客
03-26 1376
刚接触Dva对Dva的理念一点都不懂，看代码不知道为啥这里要这么写，于是我就百度了一下，找到了一片博客写的很通俗，对我帮助很大，在这里我将他的博客文章迁移过来了，给自己做了记录。 model.js： model层一般包含几个部分： namespace：model的名字，用来在页面中找到要调用哪一个model，就想id一样。 state: 用来存放数据的地方。 subscriptions:在我看来就...
使用 Dva 开发复杂 SPA
weixin_43758377的博客
09-25 921
使用 Dva 开发复杂 SPA 到了真实的业务开发过程中，会遇到许许多多不能用那些基本操作覆盖的场景，本文尝试列举一些常见的需求在dva中的实现方式。 动态加载model 有不少业务场景下，我们可能会定义出很多个model，但并不需要在应用启动的时候就全部加载，比较典型的是各类管理控制台。如果每个功能页面是通过路由切换，互相之间没有关系的话，通常会使用webpack的require.ensure来做代码模块的懒加载。 我们也可以利用这个特性来做model的动态加载。 function RouterConfi
React 最佳实践（2）
xuewenjie0217的博客
03-26 484
JSX 1、标签 具体以实际 eslint 规则和格式化工具为准，不用太过关心 （1）当标签没有子元素时，应使用自闭合的标签 // Good <Component /> // Bad <Component></Component> （2） 有多行属性，关闭标签另起一行 <Component foo="foo" bar="bar" other="other" /> （3）闭合前留一个空格 <Component /> （4）JSX 标签最外层
antd react dva在model中使用另一个model的state值
qq_36904182的博客
05-25 1401
const oldData = yield select(({ baseDictionary }) => { return ([...customPageSetting.list,]) });
基于antdesign和dva的统一中台框架
08-11
本项目“基于Ant Design和Dva的统一中台框架”正是针对这种需求而设计，它构建了一个通用的后台框架，便于快速构建和接入各类中台类应用。 1. **Ant Design**：Ant Design是蚂蚁金服开源的一套优秀的React UI组件库...
umi3-grud：Umi3 + Dva入门实践完成用户管理的CRUD应用（2020）
02-05
Dva是一个基于React和Redux的数据流管理工具，它简化了状态管理和网络请求的处理。Dva集成了一部分Redux和Redux-Saga的功能，同时引入了Model的概念，使得业务逻辑更易于组织和维护。在本项目中，Dva用于处理用户...
npm+react + dva+ant搭建的项目
10-25
DVA是一个轻量级的JavaScript框架，基于React和Redux，旨在简化状态管理和数据流。DVA提供了一种声明式的方式来定义应用的状态和行为，降低了学习曲线，使得开发者可以更快地开发出功能丰富的应用。在本项目中，DVA...
koa2-dva-antd：与管理控制台和Mobie同构
02-03
它结合了Koa2（一个由Express团队打造的轻量级Node.js Web应用框架）、Dva（一个基于React和Redux的数据流框架）以及Ant Design（一套企业级React组件库），为开发者提供了强大的工具集。 Koa2是这个框架的基础，它...
React DVA+Asp.net Web API+EF6实现增删改查
08-29
React DVA+Asp.net Web API+EF6实现增删改查 　
dva中model的使用
weixin_45343326的博客
10-18 1045
// import { getAppList, addApp, delApp, getAppSet, setApp, resetSecret } from '../services/application' import * as appService from '../services/application' export default { namespace:...
React中Dva状态管理（model）的使用总结和理解
小流至江河的博客
11-27 8570
一 概述 React中全局状态管理官方推荐使用Redux，Redux的使用场景其实在单个应用中是处于使用率只有20%，却有80%的学习成本。算是React全家桶最难理解的部分了，相信很多人学习它时越学是越学不动，我就是要放弃的时候，了解到了React-redux和redux-saga， 它们是对redux的简化处理工具。可他们配置和文件结构，依然麻烦。直到Dva的出现将React全局状态管理简化到了极致。那么今天带大家一起快速学习下Dav中全局状态的使用技巧，本篇文章仅仅是对使用方式的个人理解。 由于
React通过dva-model-extend实现 dva 动态生成 model
aimolia8633的博客
05-25 951
前言 实现通过单个component 单个router通过相应的标识对应产生不同model实现数据包分离,model namespce将会覆盖基础的Model,其中的model[state|subscriptions|effects|reducers] 将通过Object.assign进行复制( Object.assign({},obj,obj1) )将源对象里面的属性添加到目标对...
关于react中submit如何提交其它form表单的内容
Juniorselk的博客
07-29 6349
给form表单绑定一个id，然后在submit里加上form='form表单的id'即可；这里再补充两点：1，如果需要阻止submit提交的跳转，在需要提交的form表单上，添加一个onClick点击事件，在点击事件里面e.preventDefault()2，如果需要使用表单提交文件或者图片等，不需要转码提交的情况下需要在form表单中添加encType='multipart/form-data'...
ReactJS & dva 项目常见报错问题与解决方法 （react-router 4）
Wu_shuxuan的博客
01-03 1万+
1. 项目中用 dva-cli 生成路由： 命令行：$ dva g route users 报错信息： AssertionError [ERR_ASSERTION]: getRouterTree: component should be one of Router, Route, Redirect, IndexRedirect, IndexRoute at ...
使用react+antd pro中的dva/fetch完成文件/多文件上传功能
a2469025185的博客
09-19 7867
使用react+antd pro中的dva/fetch完成文件/多文件上传功能 首先是调用 request方法 import request from '../utils/request'; export async function createNotice(params){ const path = "https://xxxxxxx" return request(path, { ...
VUE2.0增删改查附编辑添加model(弹框)组件共用
热门推荐
源码好优多
02-11 2万+
Vue实战篇（增删改查附编辑添加model(弹框)组件共用） 前言 最近一直在学习Vue,发现一份crud不错的源码 预览链接 https://taylorchen709.github.io/vue-admin/#/login 自己下载下来后仔细研究了起来,发现编辑和增加写了两个弹框，我觉得这不符合vue的组件原则，于是自己把编辑和添加改成共用的 因为也是纯粹的写写前端...
基于dva对http请求的进一步封装
最新发布
06-07
在dva中，我们可以通过封装request方法来对http请求进行进一步的封装，使其更加方便和易用。 一种常见的做法是封装一个request工具函数，该函数会返回一个Promise对象，我们可以在models中的effect中使用该函数来发送网络请求。该函数可以包含一些自定义的配置参数，例如请求method、请求头、请求体等。 以下是一个基于dva的http请求封装示例代码： ```javascript import request from 'umi-request'; function http(url, options) { return request(url, options) .then(response => { if (response && response.status === 200) { return response.data; } else { throw new Error('请求失败'); } }) .catch(error => { console.error(error); throw error; }); } export default http; ``` 在上面的代码中，我们封装了一个http函数，该函数接收两个参数，分别为url和options。这两个参数与request函数的参数一致。我们使用request函数发送网络请求，并在then方法中判断请求是否成功。如果成功，我们会将请求结果返回；如果失败，我们会抛出一个错误。 在使用http函数时，我们可以通过传入options参数来自定义请求配置，例如： ```javascript http('/api/data', { method: 'post', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ name: 'test', age: 20 }) }) .then(data => { console.log(data); }) .catch(error => { console.error(error); }); ``` 在上面的代码中，我们通过传入options参数来自定义请求的method、headers和body。如果请求成功，我们会在then方法中打印请求结果；如果请求失败，我们会在catch方法中打印错误信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值