前端组件跨端复用实践（二）
在上一篇文章中我们讲到，要想实现组件的跨端复用，就必须复用逻辑层。回顾过去几年前端的发展，我们可以看到，由于Vue、React等框架的兴起，前端对View层的依赖越来越重，基本上专注于视图组件，并围绕用户交互的纬度组织代码。例如下面的组件：constcalendar=(props)=>{const[state,setState]=React.useState(props)return(setState()}>{state}
)}有自己的View和数据处理逻辑（state+props）。如何处理这块数据取决于View层用户如何交互，需要什么数据。这在大部分场景下效果很好，但是对于我们现在的多端业务场景，要么每一端独立写自己的逻辑（没有复用，效率太低），要么复用通用逻辑（publiclogic需要各种判断环境，然后使用对应的平台api，很繁琐）比如会有如下代码//各种环境判断constfetch=()=>{if(isRn)returnRnfetch;如果（isH5）返回h5Fetch；...}所以，我们可以把注意力转向逻辑处理。以model层为核心，不关心接在哪一端：这样就增强了model的能力，View层只是简单的从Model层获取状态，改变状态的函数.其次，针对不同平台的API，比如上面的fetch，可以通过注入来解决//model.tsxconstwrapModel=({fetch})=()=>{constgetUserInfo=()=>{fetch(url,{xxx})}constuseActions=()=>{getUserInfo}}//rnpage.tsxconstmodel=wrapModel({fetch:rnFetch})constPage=()=>{const{getUserInfo}=model.useActions();returnxxxx;}可以看出，这样可以最大程度的实现组件的复用，避免繁琐的环境判断
