前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
函数计算FC,每月15万CU 3个月
简介: 本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。

在现代前端开发中,异步操作已经成为不可或缺的一部分。无论是处理网络请求、响应用户输入,还是监听外部事件,异步编程模式始终占据重要位置。而RxJS作为功能强大的异步编程库,广泛应用于多个框架之中,如Vue、React、Angular。然而,不同框架之间对状态管理的机制存在差异,我们需要一种统一的方式将RxJS的Observable对象转化为各个框架的响应式数据。

本文将深入探讨如何将RxJS与Vue、React、Angular框架进行集成,并通过抽象出辅助方法vue、react的useRxangular的pushPipe`来实现跨框架状态管理。因为当你部署一个业务组件时,针对各个框架发布一套可能是很不划算的

1. Vue与RxJS的集成

Vue的响应式机制

Vue 3的核心是基于Proxy的响应式系统,它提供了refreactive等API,允许开发者轻松创建响应式数据。为了与RxJS集成,可以将Observable对象转换为Vue的ref对象,从而实现对异步数据的响应式追踪。

useRx辅助方法

useRx是我们为Vue设计的一个辅助方法,用于将RxJS的Observable对象转换为Vue的ref。当组件初始化时,我们订阅Observable并将其值更新到ref中;当组件销毁时,我们会取消订阅。

import {
    ref, onMounted, onBeforeUnmount } from 'vue';
import {
    Observable } from 'rxjs';

function useRx(observable$, defaultValue) {
   
  const state = ref(defaultValue);

  let subscription = null;

  onMounted(() => {
   
    subscription = observable$.subscribe(value => {
   
      state.value = value;
    });
  });

  onBeforeUnmount(() => {
   
    if (subscription) {
   
      subscription.unsubscribe();
    }
  });

  return state;
}

使用示例

import {
    fromEvent } from 'rxjs';
import {
    useRx} from './useRx';

export default {
   
  setup() {
   
    const clicks$ = fromEvent(document, 'click');
    const clickCount = useRx(clicks$, 0);

    return {
   
      clickCount
    };
  }
}

在这个示例中,clicks$是一个基于文档点击事件的Observable,我们通过useRx将其转化为Vue的ref,并自动订阅和管理Observable的生命周期。

2. React与RxJS的集成

React的状态管理机制

React通过useStateuseEffect等钩子函数来管理组件状态。我们可以通过订阅RxJS的Observable来更新React组件的状态,并在组件卸载时取消订阅。

useRx辅助方法

useRx是我们为React设计的辅助方法,用于将RxJS的Observable对象转换为React的state。与Vue的useRx类似,当组件初始化时,我们订阅Observable,并在组件销毁时取消订阅。

import {
    useState, useEffect } from 'react';
import {
    Observable } from 'rxjs';

function useRx(observable$, defaultValue) {
   
  const [state, setState] = useState(defaultValue);

  useEffect(() => {
   
    const subscription = observable$.subscribe(value => {
   
      setState(value);
    });

    return () => subscription.unsubscribe();
  }, [observable$]);

  return state;
}

使用示例

import {
    fromEvent } from 'rxjs';
import {
    useRx} from './useRx';

function App() {
   
  const clicks$ = fromEvent(document, 'click');
  const clickCount = useRx(clicks$, 0);

  return (
    <div>
      <h1>Click Count: {
   clickCount}</h1>
    </div>
  );
}

export default App;

在这个React示例中,clicks$是一个Observable对象,useRx将其转换为React的state,并自动管理Observable的订阅和取消订阅。

3. Angular与RxJS的集成

Angular的响应式编程机制

Angular天生对RxJS有强大的支持,它的许多核心功能(如HttpClient、表单处理等)都依赖于RxJS。Angular提供了async管道用于在模板中处理Observable,但我们可以进一步扩展这个机制,创建一个名为pushPipe的管道,用于简化Observable的订阅和销毁逻辑。

pushPipe辅助方法

pushPipe是我们为Angular设计的自定义管道,用于在模板中自动订阅Observable,并在组件销毁时取消订阅。它与Angular的内置async管道类似,但允许更灵活的默认值设置和错误处理。

import {
    Pipe, PipeTransform, OnDestroy } from '@angular/core';
import {
    Observable, Subscription } from 'rxjs';

@Pipe({
   
  name: 'pushPipe',
  pure: false
})
export class PushPipe implements PipeTransform, OnDestroy {
   
  private subscription: Subscription | null = null;
  private latestValue: any;

  transform(observable$: Observable<any>, defaultValue: any = null): any {
   
    if (!this.subscription) {
   
      this.latestValue = defaultValue;
      this.subscription = observable$.subscribe(value => {
   
        this.latestValue = value;
      });
    }
    return this.latestValue;
  }

  ngOnDestroy() {
   
    if (this.subscription) {
   
      this.subscription.unsubscribe();
    }
  }
}

使用示例

import {
    Component } from '@angular/core';
import {
    fromEvent } from 'rxjs';

@Component({
   
  selector: 'app-root',
  template: `<h1>Click Count: {
    { clicks$ | pushPipe:0 }}</h1>`
})
export class AppComponent {
   
  clicks$ = fromEvent(document, 'click');
}

在这个Angular示例中,我们通过pushPipe自定义管道,将clicks$转化为模板中的响应式数据,并在组件销毁时自动取消订阅。

4. 跨框架状态管理实现原理

通过以上示例,我们可以看到,虽然Vue、React、Angular各自有不同的状态管理机制,但我们可以通过抽象出辅助方法(useRxpushPipe)实现统一的RxJS集成。这种方式不仅简化了Observable与框架的集成,还确保了组件生命周期内的正确订阅和取消订阅,避免内存泄漏问题。

总结:

  1. Vue的useRx:将Observable转换为Vue的响应式ref对象,自动管理订阅。
  2. React的useRx:将Observable转换为React的state,确保正确的订阅和取消订阅。
  3. Angular的pushPipe:通过自定义管道,将Observable的值推送到模板中,自动处理订阅和取消订阅。

这些方法不仅为跨框架开发提供了统一的解决方案,还能提升代码的可读性与可维护性。在实际项目中,结合这些工具,可以轻松地在复杂的异步场景中实现响应式编程。

5. 扩展:全局的状态源与webcomponent部署

因为rxjs或者说响应式编程的核心基本稳定,所以可以将rxjs整个库挂载到全局:

import * as rx from "rxjs"
window.Rxjs = rx
// 其它的web component 就都可以用

然后,每个webcomponent就可以单独的发布和部署,而且可以不依赖框架到处可用

6. 优化和改进点

由于篇幅问题,本文并没有进行优化,实践中可以参考着实现。简单说一下我有做的些优化吧:vue将behaviorSubject和observable分开了,而且区分了数组和其它数据;react则是将observable分成了可变和不可变的,注意一个坑:不要用getter的observable对象,因为这样每次render会获取新的对象-除非getter是做了缓存的,不然一个ob进行pipe返回的是新的ob,就可能造成无限重新渲染!我就遇到过;angular则是针对数据类型做一个浅对比优化。

相关实践学习
【AI破次元壁合照】少年白马醉春风,函数计算一键部署AI绘画平台
本次实验基于阿里云函数计算产品能力开发AI绘画平台,可让您实现“破次元壁”与角色合照,为角色换背景效果,用AI绘图技术绘出属于自己的少年江湖。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
6月前
|
前端开发 API 开发者
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
本文由黑臂麒麟(6年前端经验)撰写,介绍ArkTS开发中的常用基础组件与布局组件。基础组件包括Text、Image、Button等,支持样式设置如字体颜色、大小和加粗等,并可通过Resource资源引用统一管理样式。布局组件涵盖Column、Row、List、Grid和Tabs等,支持灵活的主轴与交叉轴对齐方式、分割线设置及滚动事件监听。同时,Tabs组件可实现自定义样式与页签切换功能。内容结合代码示例,适合初学者快速上手ArkTS开发。参考华为开发者联盟官网基础课程。
407 75
harmonyOS基础- 快速弄懂HarmonyOS ArkTs基础组件、布局容器(前端视角篇)
|
5月前
|
移动开发 前端开发 JavaScript
Vue与React两大前端框架的主要差异点
以上就是Vue和React的主要差异点,希望对你有所帮助。在选择使用哪一个框架时,需要根据项目的具体需求和团队的技术栈来决定。
319 83
|
7月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
356 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
234 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10月前
|
前端开发 JavaScript 开发者
颠覆传统:React框架如何引领前端开发的革命性变革
【10月更文挑战第32天】本文以问答形式探讨了React框架的特性和应用。React是一款由Facebook推出的JavaScript库,以其虚拟DOM机制和组件化设计,成为构建高性能单页面应用的理想选择。文章介绍了如何开始一个React项目、组件化思想的体现、性能优化方法、表单处理及路由实现等内容,帮助开发者更好地理解和使用React。
205 9
|
8月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
207 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10月前
|
监控 前端开发 数据可视化
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
@icraft/player-react 是 iCraft Editor 推出的 React 组件库,旨在简化3D数字孪生场景的前端集成。它支持零配置快速接入、自定义插件、丰富的事件和方法、动画控制及实时数据接入,帮助开发者轻松实现3D场景与React项目的无缝融合。
535 9
3D架构图软件 iCraft Editor 正式发布 @icraft/player-react 前端组件, 轻松嵌入3D架构图到您的项目,实现数字孪生
|
9月前
|
消息中间件 人工智能 Kubernetes
解密开源Serverless容器框架:事件驱动篇
Knative是一款基于Kubernetes的开源Serverless框架,提供了云原生、跨平台的Serverless编排标准。作为Serverless中必不可少的事件驱动能力,Knative Eventing提供了云原生的事件驱动能力。
|
10月前
|
前端开发 JavaScript 开发者
使用React和Redux构建高效的前端应用
使用React和Redux构建高效的前端应用
146 2
|
10月前
|
前端开发 JavaScript Android开发
前端框架趋势:React Native在跨平台开发中的优势与挑战
【10月更文挑战第27天】React Native 是跨平台开发领域的佼佼者,凭借其独特的跨平台能力和高效的开发体验,成为许多开发者的首选。本文探讨了 React Native 的优势与挑战,包括跨平台开发能力、原生组件渲染、性能优化及调试复杂性等问题,并通过代码示例展示了其实际应用。
215 2

相关产品

  • 函数计算