ReactNative进阶（二十九）：BloC 模式

短命女 2022-10-20 13:47 257阅读 0赞

### 文章目录 ###

*   *  一、什么是 BloC 模式？
     *  二、BlocProvider (视图标签)
     *  三、StreamBuilder (视图标签)
     *  四、拓展阅读

--------------------

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]

## 一、什么是 BloC 模式？ ##

`BloC`【`Business Logic Component`】模式是paolo soares 和 cong hui 在2018年Google dartconf上提出的，具体的视频你可以参考[YouTube][].

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

> 1.  业务逻辑和UI组件糅合在一起。
> 2.  不方便测试，不利于单独的测试业务逻辑部分。
> 3.  不能更好的重用业务逻辑代码，体现在，如果网络请求的逻辑有所变动的话，加入这个业务功能被两个端（web、flutter）使用的话，是需要改动两个地方的。

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

`BloC`架构图如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center]

## 二、BlocProvider (视图标签) ##

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

## 三、StreamBuilder (视图标签) ##

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

`StreamBuilder` 架构图如下:![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center 1]

## 四、拓展阅读 ##

*  [Bloc演讲][YouTube]
 *  《[ReactNative进阶（三十五）：应用脚手架 Yo 构建 RN 页面][ReactNative_ Yo _ RN]》

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70]: /images/20221020/03c9f1fb6db947008f9cda9275990225.png
[YouTube]: https://www.youtube.com/watch?v=PLHln7wHgPE
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221020/bf5bea22e78e459d86a6e7c631421077.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3N1bmh1YXFpYW5nMQ_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221020/d6de69d149334010a6fd623eb25236a6.png
[ReactNative_ Yo _ RN]: https://shq5785.blog.csdn.net/article/details/117185409