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

Posted 2021-05-22 No Silver Bullet

文章目录

• • 什么是BloC模式？
  • BlocProvider (视图标签)
  • StreamBuilder (视图标签)
  • 拓展阅读

---

什么是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架构图如下：

BlocProvider (视图标签)

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

StreamBuilder (视图标签)

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

StreamBuilder 架构图如下:

拓展阅读

• Bloc演讲