rxjs源碼

❶ 如何用63行代碼寫一個NgRx Store

深入解析 NgRx Store 的內部運作機制，通過精簡的63行代碼實現一個基礎版本的 StoreService，探索 NgRx Store 如何通過 RxJS 進行狀態管理。本文旨在為開發者提供一個簡化版的 NgRx Store 實現，以深入理解其核心原理。

通過一個簡單的 Angular NgRx-Seed app，我們可以學習 NgRx Store 的基礎組件和工作流程。本文章將提供一個超簡化的 StoreService，包含 dispatching action、accumulating state、以及使用 selector 訂閱更新狀態的核心功能。

構建一個與 NgRx 非常相似但高度簡化的 StoreService，代碼覆蓋了基本的 Store 功能，包括創建行為主題、調度 action、以及實現狀態的積累與更新。此 StoreService 實現僅供學習和理解 NgRx Store 的內部構造，不可用於實際項目。

關注 queueScheler 的使用，確保 action 以初始化順序同步接收，避免因重新進入而導致的內存溢出問題。action$ 和 recer$ 的融合通過 withLatestFrom 操作符完成，確保了狀態更新的正確執行。

recerFactory 是 NgRx Store 的復雜部分，通過閉包實現狀態的融合。簡化版本的 StoreService 中，忽略了對 meta recers 的處理，使用 combineRecers 作為默認工廠函數，用於創建一個可作為 StoreService 的源的 recer 融合函數。

在掃描操作符（scan）的作用下，action$ 和 recer$ 被混合以創建一個具有狀態記憶能力的 stream。實現的累計函數 receState 實現了狀態的更新與累積，以響應 action 和 recer 的變化。

對於 select 和 createSelector 的實現，本文簡化了類型安全功能，直接提供基礎的實現，以展示如何從 StoreService 中獲取狀態。通過一個閉包和 map 操作符，select 函數實現了從 StoreService 獲取數據並應用到模板中的邏輯。

StoreService 實現中的 createSelector 提供了一個從所有 selectors 的結果中分離特定 selector 的工具，簡化了狀態的獲取與展示。

在實際應用中，將 StoreService 注入到 Angular app 的組件中，通過 ngOnInit 生命周期鉤子獲取狀態並將其結果顯示在模板中。組件中包含 dispatch 功能，實現與 NgRx Store API 類似的操作。

本文源代碼已提供，歡迎閱讀與學習。如有任何問題或建議，歡迎直接聯系作者。

❷ 可能是你見過最專業的表單方案---解密Formily2.0

Formily2.0官網：v2.formilyjs.org/，源碼地址：github.com/alibaba/formilyjs。項目由筆者發起，特別感謝阿里數字供應鏈事業部對Formily項目的重視與支持，以及宋思辰為Formily2.0貢獻了高性能的@formily/vue組件，瀟澤貢獻了智能網格布局組件FormGrid。

如果你是初次接觸Formily，可以閱讀介紹以了解其如何解決表單問題。對於已有使用經驗的用戶，你會發現Formily2.0的定位從復雜場景擴展到了企業級表單的專業解決方案，專業性體現在以下幾個方面：

Formily2.0自信地表示它足夠專業，並且在性能優化、依賴關系管理、包設計、答疑成本控制等方面進行了深入改進。

關於性能優化，解決性能問題的關鍵在於減少初次渲染的阻塞式計算，通過引入Reactive模式並採用類似Mobx的解決方案，優化了性能，同時減少了props臟檢查的副作用。此外，引入被動聯動模式，藉助@formily/reactive，實現了響應式領域模型，大大提高了性能。

依賴關系問題上，移除了styled-components、immerjs和rxjs的依賴，改用組件庫自身的樣式體系，如antd，或替代方案，如less和scss。這不僅減少了體積，還提高了可控性和穩定性。

在包設計方面，統一組件包到@formily/antd，抽離了@formily/json-schema包，移除了@formily/react-shared-components，確保每個包的職責明確。

答疑成本問題得到緩解，通過定義新Schema Type Void、引入x-decorator/x-decorator-props描述包裝器、維護dataSource狀態、定義x-reactions響應器概念，以及廢棄自動刪值的默認行為，使答疑更加清晰。

自定義組件擴展機制採用工廠式注冊，使用@formily/reactive實現更優雅的開發方式，引入readPretty模式，使自定義組件更加靈活。

文檔體系的完善使得查找文檔變得容易，便於維護和使用者查找。

發量問題得到了解決，通過解決所有之前的問題，確保了系統更加高效穩定。

Formily2.0的亮點包括獨立的響應式解決方案@formily/reactive，更優雅的開發方式，支持Vue2/Vue3，以及Effects局部狀態、智能網格布局、響應式並發渲染等特性。

總結來說，Formily2.0在多個方面進行了全面改進，旨在提供專業級的企業級表單解決方案，通過引入Reactive響應式編程模式，解決了性能、依賴、包設計、答疑成本等核心問題，為開發者提供了一個高效、靈活且易於維護的表單框架。

❸ [Angular 組件庫 NG-ZORRO 基礎入門] - 源碼初窺: Select - 2

Angular 組件庫 NGZORRO 的 Select 組件基礎入門 源碼初窺的要點如下：

1. 組件結構：

   • Select 組件被細分為多個部分，包括nzselecttopcontrol、nzoptioncontainer和nzoption等組件。
   • nzselecttopcontrol組件負責展示已選項目。

2. nzselecttopcontrol組件功能實現：

   • 該組件通過監聽特定事件來實現功能。
   • 已選項目的展示依賴於nzSelectService.listOfCachedSelectedOption提供的值。
   • 展示形式根據單選和多選有所不同，具體細節需查閱源代碼。

3. 服務層與數據交互：

   • nzselect.service.ts文件採用服務層來簡化組件間的數據交互。
   • 利用Rxjs提供的Subject和BehaviorSubject實現事件和數據的管理。
   • Subject和BehaviorSubject允許在任意地方進行訂閱監聽，確保數據同步。

4. Subject與BehaviorSubject的區別：

   • BehaviorSubject能夠立即發出最新值，確保組件訂閱事件時數據的時效性。
   • Subject則需要等待下一次用戶操作觸發事件才能發出值。

5. 組件的核心：

   • Select 組件的核心在於組件的拆分與數據同步。
   • 通過組件拆分實現便於維護和管理，同時利用服務層進行數據管理，確保各組件間的數據流穩定。

總結：NGZORRO的Select組件通過巧妙的組件拆分與數據同步設計，實現了易於維護和管理的結構，同時保證了組件間數據流的穩定性和時效性。