前端组件跨端复用实践（一）
我们的页面主要由两部分组成：1.逻辑2.视图如果想跨端复用，可以从以上两方面入手。一般跨端页面有几种情况下的需求是一样的，对应页面里面的逻辑是完全一样的。视图层只是使用了不同的UI组件名称（h5中的div，小程序中的View），逻辑层需要完全复用。看起来逻辑和UI组件只是部分不同，复用公共部分的要求完全不同。不同终端自己写，有两类复用方案不需要复用。复用逻辑，各终端注入UI组件将逻辑提取到一个通用的通用模块中，然后在各端的项目中引入相应的逻辑实现，将逻辑注入到UI组件中。具体代码见：//model.tsxexportconstmodel=(props:any)=>{const[name,setName]=useState(props.name)const[age,setAge]=useState(props.age);return{name,setName,age,setAge,...props}}//miniview.tsximport{model}from'./common/model'constminiView=(props:any)=>{const{name,setName,age,setAge}=model(props)return{name}}//h5view.tsximport{model}来自'./common/model'consth5View=(props:any)=>{const{name,setName,age,setAge}=model(props)return<p>{name}
}这样做的好处是逻辑复用，提高效率。model层和UI层都可以改变逻辑和view一样，对于跨端页面需求同样的情况，更友好，可以灵活调整公共逻辑写在model中，difference逻辑写在View层。复用逻辑+视图方案一是将逻辑和UI分离。如果我们将两者一起复用，效率会更加明显，但是会遇到以下问题，两端底层UI组件不一致。每一端都会有自己的特定调整。对于问题一，底层的UI组件不一致。可以通过引入胶水层，将每一端的API扁平化，然后修改引用路径来实现time//h5index.tsimport{View}from'XXComponents/h5'//rnindex.tsimport{View}from'XXComponents/rn'//xxComponents/h5constView=divexportView//xxComponents/rnimport{View}from'react-native'exportView=View对于问题2，项目文件目录结构为，项目启动后，将common文件夹复制到h5|迷你|rn以软链接的形式├──package.json├──projects│├──common│├──h5├──common├──package.json│├──mini├──common├──package.json│└──rn├──common├──package.json比如我们有一个PageA（三个终端），A有一个组件B（三个终端）），还有一个组件C在B组件（在h5、rn中，不在小程序中），类似下图//pageAimportBfrom'./Components/B'//引用common文件夹中的B组件importCfrom'../../Components/C'//引用每一端定义的C组件
那么处理方式就是：ComponentC逻辑层写在有限公司在mmon文件夹中，ComponentC的View层写在两端的文件夹中。h5|rn同时导入ComponentC的逻辑，mini不导入逻辑。代码代码如下//h5componentCimportModelfrom'../common/modelC'constViewC=()=>{conststate=Model()return
{state.name}
}//rnComponentCimportModelfrom'../common/modelC'constViewC=()=>{conststate=Model()return
{state.name}}//miniComponentCconstViewC=()=>{returnnull}这样可以最大程度的复用代码，也可以保持结构清晰maintain
