利用React Portal思想，实现函数式的业务流程

什么是Portal

Portals 提供了一种很好的将子节点渲染到父组件以外的 DOM 节点的方式。

React原生实现，Vue3现在也具备了相同的能力，Vue2目前没有，但是有个包可以用。地址

简单来说PortalVue包含两个组件,portal组件和portal-target组件,他允许你将portal组件中的内容转至portal-target组件所在的地方.

PortalVue is a set of two components that allow you to render a component’s template (or a part of it) anywhere in the document - even outside the part controlled by your Vue App!

本文不讨论如何使用React、Vue当中的Portal如何使用，本文讨论利用Portal思想，换个角度实现函数式的业务流程。

函数式的业务流程

问题一：什么是函数式的业务流程？

问题二：干啥的？

先叠个甲！以下分析均是特定场景下的个人观点，如有误，使劲骂！

问题一：

什么是函数式的业务流程？我的理解是，将基础能力拆分成细小的原子能力，可以是一个函数，也可以是一组函数组成。再由原子能力通过任务编排，形成一条链路，进而形成一个业务流程。

一个业务流程的代码就像这样：

// flow-1.js

const param = {
    a:1,
    b:2
}

const start = async ()=> {
    const res1 = await func1(param) //调用个业务接口获取一些数据
    const res2 = await func2(res1) //对上一步数据进行一些处理 
    if res2 ... //业务数据的一些处理
    
    const res3 = await func3({res1,res2})//这里要弹个窗，处理一些输入
    if res3 ... // 弹窗等待用户输入，可以是取消弹窗，也可以是输入了一些数据什么
    ...
    return xxx // 最后结束流程并返回一些数据/状态
}


export default start

用一张图简单描述业务流程。

重点在这一句：

const res3 = await func3({res1,res2})//这里要弹个窗，处理一些输入

业务开始，先获取列表数据，用户选择一项数据选择修改，弹出一个修改框，修改完毕保存。 换个角度思考，这个业务就是数据的一个变化，最后通过api进行保存。但是我们在实际去写的时候会发现依赖UI、业务割裂（Vue多个method处理），要去控制一个UI的show、hidden等等逻辑。

在多端场景下，并且业务逻辑相同，就很难去完全抽象、封装这个业务逻辑。

实现使用组件函数化，脱离对具体 UI 的依赖，让函数式的流程成为前端逻辑真正的基础。

为了实现这个目标，我开发了这个包

源码：

github.com/wangronglei…

npm：

www.npmjs.com/package/por…

portal-vue2

原理很简单，该 npm 包利用 Vue2 中的 extend 和 Js 中的 appendChild 将需要的组件 append 到 body 下，实现弹窗和主体页面充分解耦，并且利用 Promise 实现使用组件函数化。

该包还可以进一步进化成传入dom节点id，实现定向插入，我还没做。

这样一来，UI可以变成参数传入流程函数，流程函数可以独立出来，可以用npm包的形式达到多端共用，减少维护成本等。

我之前写过关于微前端 + Module Federation的文章，在这套架构体系下，portal-vue2更能发挥作用，一些通用的业务流程实现一处实现，多处使用。极大的减少了维护成本和新需求的开发成本。

代码比较简单，就不分析了，大家有兴趣可以去看看。

微信公众号求关注： 王大锤学前端

酒浆，拜拜！