react获取id_解决React应用界面开发常见痛点(一)业务逻辑与UI分离

前言:本系列是针对于React在界面开发痛点的一些解决方案,只是React应用中偏向展示的一环

构建一个业务与UI分离的react应用

本篇是基于HOC方案并未使用Hooks

业务逻辑与UI

在编写一个react组件前,我们一定要弄清两件事。

  1. 什么是UI?
  2. 什么是业务逻辑?

UI:组件的具体展示元素,通俗点就是组件的长相。接受到合理的数据就可以展示出一个合格的组件。

业务逻辑:获取数据、发送请求等等有比较明确的独特业务的逻辑。

为什么要业务逻辑与UI分离?

在编写react组件的时候,经常会出现业务逻辑相似,UI基本相同的组件,可能只是获取的数据方式有一些不同。

for example: 掘金的感兴趣小册列表为例子

d05d6ab63a1c16078af64e4bc9ff2a0c.png
  1. 最外层的红框为这个小册的组件Booklet
  2. 左侧的是小册的封面
  3. 右侧上方的是小册的名称
  4. 购买人数
  5. 小册的链接

以上这些都是Booklet组件的UI元素

在Component中:

Booklet组件只需要知道以下数据就可以正常工作:

  1. 小册的封面(imageUrl)
  2. 小册的名称(name)
  3. 购买人数(buyerNums)
  4. 链接(link)

UI组件并不需要知道:

  1. 如何获取数据,(如何根据小册id如何获取到的)
  2. 数据何时回来,(请求结束填充数据)
  3. 请求的具体处理,(请求开始、结束、容错、什么时候开始loading等等)

以上这些应该在哪里处理?

在Container中

  1. 根据小册ID获取数据。
  2. 判断请求的当前状态。(loading、error、success、cancel)。
  3. 制作好数据传递给Component

想要分离UI与业务逻辑时遇到的常见痛点

  1. 生命周期中包含请求代码,不好抽离。
  2. 内部state导致组件后续扩展能力差。

如何解决以上问题。

recompose可以合理解决以上问题。

在传统的写法中:

path: components/card/index.jsxclass Card extends React.PureComponent {      state = {            name: undefined,    link: undefined,    buyerNum: undefined,    logoUrl: undefined,  }   componentDidMount() {    getCardById(this.props.id).then(card => {      const {name ,link, buyerNum, logoUrl} = card;      this.setState({        name,        link,        buyerNum,        logoUrl,      })    });  }  render() {    const {name ,link, buyerNum, logoUrl} = this.state;    return (      
{name}
{name}
{buyerNum}人已购买
试读
)}}

上面的代码就是标准的业务与UI不分离

难以维护的影响

后续需求仍然使用这个卡片组件的UI,但是变成了卡片列表包含多个卡片,使用卡片id获取卡片数据的业务逻辑就很不合理。

如何解决?

UI与业务分离

UI层

ff8bb4b36fd6fba92f84e086daf7d8e1.png

业务逻辑层

1bd8b64fb6c6ffe7634b9d7c76d362d5.png

新的代码种Card的UI组件不再被任何业务逻辑干扰。Card的container包含了本次根据id获取卡片的业务逻辑。如果后续需要卡片列表。只需要一个CardList的container去获取数据,渲染Card的UI组件。

UI与业务分离的思路已经讲完了。

下一期会讲一讲reselect这个简洁的第三方库如何减少react组件无意义的render。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/476063.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(二十六)【2021 WWW】Knowledge-Preserving Incremental Social Event Detection via Heterogeneous GNNs

题目: Knowledge-Preserving Incremental Social Event Detection via Heterogeneous GNNs 中文题目: 基于异构gnn的知识保持增量社会事件检测 学习目标 学习怎么知识增强的? 学习怎么处理时间等多个因素的? 学习怎么构建子图…

IL应用之——用IL分析接口的本质

IL反编译利器——Ildasm.exe和Reflector.exe:一:Ildasm.exe简介 这一微软VS自带工具,在上一篇博文《初识Ildasm.exe——IL反编译的实用工具》中已经做了详细介绍,这里不再鳌述;二:Reflector.exe简介 至此(1…

自定义_如何自定义协议

前言何为自定义协议,其实是相对标准协议来说的,这里主要针对的是应用层协议;常见的标准的应用层协议如http、ftp、smtp等,如果我们在网络通信的过程中不去使用这些标准协议,那就需要自定义协议,比如我们常用…

校验json格式_格式化展示,校验错误,编辑JSON,这几个JSON工具一定不能错过

今天给大家介绍几个常用JSON的工具,基本上能满足你工作中对JSON的所有需求google插件 JSONView安装好插件后,格式化接口返回的JSON,还能展开节点和关闭节点,超级方便格式化本地JSON,检验错误JSON Viewer网页版将杂乱的…

推荐系统常用评价指标和代码实现

评价指标 Recall 名称: 召回率(真阳性率) 意义:在推荐系统中,我们只关心正确推荐的有多少,也就是用户真实喜欢的,并不会关心推荐错的,所以我们用召回率,而不是准确率&a…

python timeit用法_十大Python开发技巧

Python开发指南, 超级实用足以让您震撼> Photo by Christina Morillo from StockSnap时不时地,当我了解Python的新功能时,或者我发现其他一些人不知道该功能时,我会记下它。在过去的几周中,我最近了解或实现了一些有趣的功能-S…

python编程中的经验(一直更新)

文章目录1. python基础语法1.1 怎么让两个list或者其它可以迭代的放到一起1.2 random.choice(x, n, replaceTrue) numpy中从某个数据集中选择1.3 如何根据key返回字典的value1.4 The truth value of a Series is ambiguous. Use a.empty, a.bool(), a.item(), a.any() or a.all…

Cairngorm初学者入门教程 第六节--Cairngorm中Command利用Delegate与Service连接

在上一节,我们利用FrontController 去映射 Event与Command 在这一节我们主要针对Command这部分动作做介紹。在RIA应用程序中,不可或缺的部份就是跟后台服务器连接进行数据传递。Command通过Delegate去做Services的部份(包含Remoting,WebServices,…等) C…

3d点击_3D打印服务加工在医疗器械行业的应用

3D打印技术如今已经很常见的出现在了我们日常的制造生产中。普通的3D打印机从最开始的几万块到如今的几千块,设备价格的降低也使得3D打印技术普及率的增加,而技术的普及也推动着技术的发展。3D打印开始应用到许多行业当中,下面悟空打印坊3D打…

所有算法库的使用(sklearn,scipy)

文章目录1. sklearn1.1 sklearn.preprocessing 之 fit 和 transform 以及 fit_transform1.2 算法之 fit 和 predict和predict_proba1.3 predict_proba1.4 各种评测指标1.4.1 R2R^2R21.4.2 准确度、精准率、召回率1.4.3 平均绝对误差(MAE)和均方误差(MSE)1.5 特征缩放 StandardS…

android aar保存图片文件异常_我去!合并AAR时踩坑了!

点击上方“刘望舒”,马上关注,早上8:42推送真爱,请置顶或星标作者: leeon7https://www.jianshu.com/p/8f7e32015836背景在输出Android模块时,有时会因为个别原因(比如来自业务的不可抗力),要求将模块打包成一个文件提供…

与kylin_Kylin 迁移到 HBase 实践在小米的实践

背景小米Kylin生产环境部署的是基于社区2.5.2修改的内部版本,所依赖HBase集群是一个公共集群,小米内部很多离线计算服务共享使用该HBase集群。由于Kylin已经产生超过6000张HBase表,给HBase的metadata管理造成了不小的压力,HBase m…

LeetCode 1227. 飞机座位分配概率(DP+数学归纳法)

1. 题目 有 n 位乘客即将登机,飞机正好有 n 个座位。第一位乘客的票丢了,他随便选了一个座位坐下。 剩下的乘客将会: 如果他们自己的座位还空着,就坐到自己的座位上, 当他们自己的座位被占用时,随机选择…

LeetCode 1025. 除数博弈(动态规划)

1. 题目 爱丽丝和鲍勃一起玩游戏&#xff0c;他们轮流行动。爱丽丝先手开局。 最初&#xff0c;黑板上有一个数字 N 。在每个玩家的回合&#xff0c;玩家需要执行以下操作&#xff1a; 选出任一 x&#xff0c;满足 0 < x < N 且 N % x 0 。用 N - x 替换黑板上的数字…

BN / LN / IN / GN /

链接 但是代码不敢苟同! 所以自己写了两种代码! 由于这只是测试, 并不是用来训练, 所以α和β参数就没有加! def BN(inputs):c inputs.shape[1]for i in range(c):channel inputs[:,i,:,:]mu np.mean(channel)var np.var(channel)channel_new ((channel - mu)/(np.sqrt(…

中文验证码 php_还在苦恼验证码怎么实现?看看这个验证码组件合集,你想要的都有...

随着安全性的要求越来越高&#xff0c;如今的验证码已经不再是简单的四个数字或者字母了&#xff0c;更复杂的图形验证码和行为验证码已经成为了更流行的趋势&#xff0c;但更难的实现也让很多开发者头秃&#xff0c;Gitee 已经替你们想到了这一点。不多说了&#xff0c;下面这…

reload端口 tomcat_tomcat上部署网站的三种方式

一、利用webapps文件夹自动部署这是最简单的方式&#xff0c;只要将网站直接拷贝到&#xff1a;tomcat根目录下的webapps文件夹里举例&#xff1a;helloworld文件夹下创建里index.html文件&#xff0c;然后把helloworld文件夹移动到tomcat根目录下webapps文件夹里&#xff0c;重…

不能用蛮力法解决的问题_溆浦事蒙汉:脱贫攻坚绝不能心浮气躁骄傲自满疲倦厌战...

脱贫攻坚绝不能心浮气躁骄傲自满疲倦厌战——蒙汉到卢峰镇检查“四支队伍”集村部工作情况检查南华山村“四支队伍”集村部工作情况与大潭村贫困户舒采米座谈红网溆浦讯(记者 伍交才)8月28日&#xff0c;市人大常委会副主任、县委书记蒙汉到卢峰镇南华山村、大潭村检查“四支队…

mock模拟接口测试 vue_vue+mock.js实现前后端分离

之前都是介绍在普通项目中使用mock.js&#xff0c;那么本次就来介绍一下在vue中使用mock.js实现前后端分离。安装&#xff1a;npm install mockjs这里先写个小案例介绍一下具体使用&#xff0c;写法不规范&#xff0c;仅供参考。然后案例讲完后我们讲具体的规范使用那么一起来看…

mysql slow log 分析工具_mysql slow log分析工具的比较

mysql 中的 slow log 是用来记录执行时间较长(超过 long_query_time 秒)的 sql 的一种日志工具。启用 slow log在 my.cnf 中设置[mysqld]slow_query_logonslow_query_log_filemysql-slow重启 MySQL 服务。五款常用工具mysqldumpslowmysqlslamyprofimysql-explain-slow-logmysql…