ReactNative进阶(二十九):BloC 模式

811 阅读1分钟

在这里插入图片描述

一、什么是 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 架构图如下:在这里插入图片描述

四、拓展阅读