ReactNative BloC 模式讲解

举报
SHQ5785 发表于 2023/07/07 08:37:51 2023/07/07
【摘要】 一、什么是 BloC 模式?BloC【Business Logic Component】模式是paolo soares 和 cong hui 在2018年Google dartconf上提出的,具体的视频你可以参考YouTube.从视频中可以看到paolo soares用一个及其简单的例子阐述了传统写法的问题:业务逻辑和UI组件糅合在一起。不方便测试,不利于单独的测试业务逻辑部分。不能更好...

一、什么是 BloC 模式?

BloCBusiness Logic Component】模式是paolo soares 和 cong hui 在2018年Google dartconf上提出的,具体的视频你可以参考YouTube.

从视频中可以看到paolo soares用一个及其简单的例子阐述了传统写法的问题:

  1. 业务逻辑和UI组件糅合在一起。

  2. 不方便测试,不利于单独的测试业务逻辑部分。

  3. 不能更好的重用业务逻辑代码,体现在,如果网络请求的逻辑有所变动的话,加入这个业务功能被两个端(web、flutter)使用的话,是需要改动两个地方的。

基于上面出现的一些问题,paolo soares顺利的将我们重传统的开放方式,引入到了Bloc模式。

BloC架构图如下:在这里插入图片描述

二、BlocProvider (视图标签)

BlocProvider: 使用 BlocProviderBlocView 进行关联, 使在 View 中, 可以使用 Bloc.

三、StreamBuilder (视图标签)

StreamBuilder: 响应式视图. 当 Bloc 中数据改变时, 会重构 StreamBuilder.

StreamBuilder 架构图如下:在这里插入图片描述

四、拓展阅读

【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。