使你的业务逻辑独立于UI组件
最初，业务逻辑组件（BLoC）模式是由谷歌引入的，作为处理Flutter应用程序中状态的解决方案。它允许你通过将业务逻辑与UI组件分离来减少UI组件的工作负荷。
随着时间的推移，其他框架也开始支持BLoC模式。在这篇文章中，我将讨论我们如何在React中使用这种BLoC模式。
在React中使用BLoC模式的好处
BLOC架构图
BLoC模式背后的概念是直截了当的。正如你在上图中看到的，业务逻辑将与UI组件分开。首先，它们将使用一个观察者向BLoC发送事件。然后，在处理完请求后，UI组件将被BLoC使用观察者通知_。_
那么，让我们详细看看这种方法的优点。
1.灵活地更新应用逻辑
当业务逻辑独立于UI组件时，对应用程序的影响将是最小的。你将能够在任何时候改变业务逻辑而不影响UI组件。
2.重用逻辑
由于业务逻辑在一个地方，UI组件可以重复使用逻辑，而不需要重复代码，这样应用程序的简单性就会提高。
3.测试的方便性
在编写测试用例时，开发人员可以专注于BLoC本身。所以代码库不会被打乱。
4.可扩展性
随着时间的推移，应用需求可能会发生变化，业务逻辑也会不断增长。在这种情况下，开发人员甚至可以创建多个BLoCs，以保持代码库的清晰性。
此外，BLoC模式与平台 ，与环境无关，因此，开发人员可以在许多项目中使用相同的BLoC模式。
将概念付诸实践
让我们建立一个小型的计数器应用程序来演示BLoC模式的使用。
第01步：创建一个React应用程序并构建它。
首先，我们需要先建立一个React应用程序。我将把它命名为bloc-counter-app。另外，我也将使用rxjs。
// Create React app
// Install rxjs
然后，你需要删除所有不必要的代码，并将应用程序结构化，如下所示。
- Blocs - 保留所有我们需要的Bloc类。
- 组件 - 保留UI组件。
- Utils - 保留项目的实用文件。
焊接结构
第02步：实现BLoC。
现在，让我们来实现BLoC类。BLoC类将负责实现所有与业务逻辑相关的主题。在这个例子中，它负责的是计数器逻辑。
因此，我在bloc目录下创建了一个名为CounterBloc.js的文件，并使用管道将计数器传递给UI组件。
正如你所看到的，这个类中有简单的逻辑。然而，当一个应用程序的规模越来越大时，如果我们不把业务逻辑分开，可以想象其复杂性。
第03步：通过一个中间类为BLoC添加更多的美感。
在这一步，我将在utils目录下创建StreamBuilder.js，以处理来自UI的计数器请求。此外，开发人员可以在其中处理错误和实现客户处理程序。
在AsyncSnapshot类中，我们可以初始化一个构造函数，处理我们的数据（检查可用性，等等），并处理错误。但在这个例子中，为了便于演示，我只返回了数据。
初始数据被传入AysncSnapshot类，并存储在每个订阅的快照状态中。然后它将在UI组件中得到渲染。
**注意：**确保在卸载UI组件时取消订阅所有的观察变量并处置BLoCs。
第04步：实现UI组件。
正如你现在看到的，增加()和减少()方法在UI组件中直接被调用。然而，输出数据是由一个流构建器处理的。
最好是有一个中间层来实现自定义处理程序来处理错误。
在app.js文件中，BLoC是使用CounterBloc类初始化的。因此，计数器组件是通过传递BLoC作为道具来使用的。
这就是了。现在你可以把你的业务逻辑当作你的UI组件之外的一个独立实体，并根据你的需要来改变它。
要使用和改进这个例子的应用程序，请参考项目库，不要忘记做一个PR。😃
最后的思考
根据我的经验，BLoC模式可能成为小规模项目的开销。
但是，随着项目的发展，使用BLoC模式有助于建立模块化的应用程序。
另外，你必须对rxjs有一个基本的了解，以及观察变量是如何工作的，以便为你的React项目实现BLoC模式。
所以，我邀请你尝试一下BLoC模式，并在评论区分享你的想法。
谢谢您的阅读！!
用Bit构建和分享独立的JS组件
比特是一个超级可扩展的工具，它可以让你创建_真正的模块化_应用程序 ，其中有_独立_编写、版本和维护的组件。
用它来构建模块化的应用程序和设计系统，编写和交付微型前端，或者简单地在应用程序之间共享组件。
一个独立的源码控制和共享的 "卡片 "组件（右边是它的依赖关系图，由Bit自动生成）。
