使你的業務邏輯獨立於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自動生成）。