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组件通过巧妙的组件拆分与数据同步设计，实现了易于维护和管理的结构，同时保证了组件间数据流的稳定性和时效性。