前端组件跨端复用实践(二)

上一篇我们聊到，如果要实现组件的跨端复用，那么必然就要复用逻辑层。回过头来，审视过去几年前端的发展，我们可以看出，由于Vue,React框架等的兴起，前端越发重View层，基本都是以视图组件为主，围绕用户交互的纬度组织代码。比如下面这个组件：

const calendar = (props) => {
    const [state, setState] = React.useState(props)
    return(
        <div onClick={()=> setState()}>
            {state}
        </div>
    )
}

它有自己的View和数据处理逻辑(state+props),这一块的数据怎么处理，取决于View层用户怎么交互，需要什么数据。这在大部分场景下都能发挥很好的作用，但是针对我们目前的多端业务场景，要么每端都独立写各自的逻辑(没有复用，效率太低)，要么复用公共逻辑(公共逻辑里面需要各种判断环境，然后使用对应平台api，很繁琐) 比如会有以下代码：

// 充斥各种环境判断
const fetch = () => {
	if(isRn) return Rnfetch;
	if(isH5) return h5Fetch;
  ...
}

于是，我们可以把注意力移到逻辑处理这一块来。将model层作为核心，不关心对接的是哪一端:

这样一来，对于model的能力得到增强，View层就只是简单的从Model层获取state以及改变state的函数。其次针对不同平台的api，如上面的fetch，那么就可以通过注入的方式解决

// model.tsx
const wrapModel = ({fetch})=()=> {
	const getUserInfo = ()=>{
	  fetch(url,{xxx})
  }

 const useActions = ()=>{
    getUserInfo
	}
}
// rn page.tsx
const model = wrapModel({fetch: rnFetch})
const Page = ()=> {
	const { getUserInfo } = model.useActions();
	return xxxx;
}

我们可以看出，这样一来，既做到了最大程度组件复用，又能避免繁琐的的环境判断