2021-06-07

最新推荐文章于 2025-03-17 15:48:33 发布

MQMaoQiang

最新推荐文章于 2025-03-17 15:48:33 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 文章标签： android 设计模式

本文链接：https://blog.youkuaiyun.com/computer30000/article/details/117651705

Android 专栏收录该内容

96 篇文章

订阅专栏

本文介绍了淘宝小程序采用的原生响应式UI框架Reactor，包括其核心功能与能力扩展。阐述了响应式编程思想，它是面向数据流和变化传播的声明式编程范式，适用于高负载、多用户应用场景。还举例说明了Android中响应式编程的应用，并提及了Rx家族的相关源码地址。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#1. 由淘宝小程序框架说起

最近我负责的APP接入淘宝小程序，所以对它的原理简单了解了下。淘宝小程序采用了原生响应式UI框架。
首先需要提到Reactor，Reactor 是使用 C++开发的响应式框架。

##核心功能

Reactor的核心功能包含了组件化、状态管理、表达式运算、模板解析、CSSOM、节点构建6个部分，
组件化：实现组件的组合与扩展
状态管理：实现响应式更新
表达式运算：实现数据绑定

模板解析: 解析模板结构和渲染指令
CSSOM：管理样式表/实现选择器
节点构建：展开生成节点树

##能力扩展
核心功能是框架的根本，但还需要对核心功能有一定扩展，才可以对接到各种技术栈和使用场景。

###扩展组件
Reactor除了可以用JS封装组件，还支持C++扩展组件，给C++开放的能力更加强大。
###对接各种脚本引擎
支持的脚本引擎包括JS（V8和JSC）、WebAssembly，还有Dart和Java。
###对接各种渲染引擎
Reactor定义了“渲染器”的基类。可对接各种模式的渲染引擎，如Unicom（C++版Flutter）、Heron（自绘版Weex）、U4mini（原生DOM API）。
###编译成WebAssembly
支持WebAssembly是指自己编译出的app.wasm包里调用到响应式框架的API；编译成WebAssembly是指响应式框架本身也可编译成reactor.wasm, 可以运行在浏览器里调用DOM API 渲染页面。app.wasm和reactor.wasm可以同时使用。
详细了解淘宝小程序的原生响应式UI框架可参考：https://yuque.antfin-inc.com/taobaoapp/reactor/vmag8r

#2. 响应式编程
淘宝小程序的原生响应式UI框架是对响应式编程思想的一种应用。关于响应式编程的思想，我在网上搜罗了一圈也没找到一个比较系统的讲解此种思想的。只能从只言片语中慢慢体会响应式编程。

##概念
维基百科上看到：在计算中，响应式编程，也叫反应式编程（Reactive Programming）是一种面向数据流和变化传播的声明式编程范式。我理解这里的关键词有三个：数据流、变化传播、声明式。数据流是指程序处理的各种数据；变化传播是指数据发生变化后，该变化引起一系列变化的过程；声明式是指在代码中预先声明好了各种处理过程。

##理解响应式编程
响应式编程是观察者模式的一种应用。
响应式编程与命令式编程。result = a+1; 对于命令式编程而言，计算完成后，如果a的值发生变化，则不再会对result的值造成影响；而对于响应式编程，a值的变化会对result造成影响，这样result的值一直会比a大1, a+1的计算处理就可以理解为响应变化的过程。只是这个核反应堆比较简单，只是加1而已。

在观察者模式的实现中，涉及的对象有观察者、被观察者，两者通过订阅或注册的方式产生相互关联。被观察者会在特定时间产生特定的事件。而这些特定的事件是一些观察者恰好需要的。事件的产生通常会引起被观察者一系列的反应。观察者订阅被观察者的特定事件，或将自己注册到被观察者，仅对某些事件反应。

##适用场景
对于高负载、多用户应用的场景下，响应式编程是一种比较优雅的解决方案。像社交应用、游戏、音视频应用；此外，应用有以下模块也适合应用：需要大量交互的服务端代码、代理服务器/负载均衡器、人工智能/机器学习、实时数据流处理。

##ReactiveX家族源码地址
RxJava：https://github.com/ReactiveX/RxJava
RxAndroid：https://github.com/ReactiveX/RxAndroid
RxSwift：https://github.com/ReactiveX/RxSwift
Rxjs：https://github.com/ReactiveX/rxjs
RxDart：https://github.com/ReactiveX/rxdart
RxPY：https://github.com/ReactiveX/RxPY
其他，可在此查找：https://github.com/ReactiveX

#3. 在Android中举例响应式编程
在Android中，常见的点击事件是观察模式的一种应用，View作为被观察者，OnClickListener作为观察者，通过View的setOnClickListener方法达成订阅关系。当View被点击（事件产生）时即触发OnClickListener的onClick方法，实现观察者方法的执行。

另外，四大组件之一的广播就是一种观察者模式，与普通观察者模式不同的是，除了观察者（广播接收方）和被观察者（广播发送方），还多了一个角色，就是AMS（Activity Manager Service）,它是Android中最核心的服务，主要负责四大组件的启动、切换、调度，还有应用进程的管理和调度等工作。它的职责与操作系统中的进程管理和调度模块相类似。在广播中，AMS担当了消息中心的角色。广播示意图如下，

广播接收者通过 Binder机制在AMS注册；
广播发送方通过 Binder机制向AMS发送广播；
AMS根据广播发送方发送广播的特点（action）在已注册的广播接收方中寻找订阅了该action的广播接收者；
AMS将广播发送到目的广播接收者的消息循环队列中；
广播接收者通过消息循环拿到此广播，并回调onReceive()方法。

#4. Rx家族之RxJava
响应式编程当前已经有很多成熟的库供使用，如Rx系列，RxJava、RxSwift等。针对Android的也推出了RxAndroid，其实是RxJava的近似版本。

下图为根据https://gank.io/post/560e15be2dca930e00da1083 整理的一张脑图，希望对你理解响应式编程有所帮助。

（附件可下载原版脑图）

此文章为一篇个人学习笔记。希望对你也有帮助。如有缺陷和不足，欢迎批评指正。

#附：

23种设计模式分为三类，分别是创建型、行为型、结构型。
创建型包括5种：工厂方法模式、抽象工厂模式、单例模式、构建器模式、原型模式；
行为型包括11中：职责链模式、命令模式、解释器模式、迭代器模式、中介者模式、备忘录模式、观察者模式、状态模式、策略模式、模板方法模式、访问者模式。
结构型包括7种：适配器模式、桥接模式、组合模式、装饰模式、外观模式、代理模式、享元模式。
2.整理了下ReactiveX家族源码地址
RxJava：https://github.com/ReactiveX/RxJava
RxAndroid：https://github.com/ReactiveX/RxAndroid
RxSwift：https://github.com/ReactiveX/RxSwift
Rxjs：https://github.com/ReactiveX/rxjs
RxDart：https://github.com/ReactiveX/rxdart
RxPY：https://github.com/ReactiveX/RxPY
其他，可在此查找：https://github.com/ReactiveX

于20200831