如果vue使用高阶组件，那么能起飞吗？

前言

首先你需要知道什么是高阶组件？
高阶组件能解决什么问题呢？
如果你了解并使用过react，那么我想这个概念你不会觉得很陌生
好像vue解决的方案会很多，高阶组件真的需要去扩展吗？
高阶组件就真的很完美吗？
源码

高阶组件是什么

我觉得可以这么理解高阶组件，讲的直白点，就是一个组件通过一个函数处理，并返回一个组件，看上去也不是很拗口，就像是某个组件需要经过一个管道，而这个管道说简单了就是一个中间件，其实这可以说是一种开发思想，我们用代码标识新组件 = Hoc函数(传递的组件)
在React中，诸如Redux、React-router等都有这类思想贯穿着，React.context这类Api我想大概率都很熟悉才是

高阶组件能解决什么问题呢

属性代理
条件渲染
权限鉴权
反向代理
组件的继承与扩展...

咱们就直接开门见山就着上面几点详细的说下吧，也希望小伙伴们补充留言，一起交流学习。

项目介绍

本次我会以一个小demo的形式展现这次分享
项目中我才用的技术栈是vue3 + jsx的形式
详情请参阅下面的源码一起造轮子
本小节代码

属性代理

属性代理这个按照我的理解，可能就是如果有一个基础组件已经完成，可是这个时候想要扩展些属性，比如我们需要透传一些额外的属性方案等，那么前提还不影响基础组件的功能

我会以截图的形式跟大家分享思路，具体的源码还是请大家自己查阅

那么基础组件是PopsTransfer.vue,通过HocOne.jsx这个方法包裹

js 复制代码

HocOne.jsx

export default function HocOne(Comp) {
  const userInfo = {
    username: 'chrisworkalx',
    hobbies: ['eat', 'playing']
  };

  // return setup(props, { attrs, emit, expose, slots }) {},
  return ({ ...defaultProps }) => {
    return <Comp user={userInfo} {...defaultProps} />;
  };
}

总结：这里只是透传一个额外属性userInfo，日常开发中可能会涉及更加复杂的场景比如可能会有http请求携带一些额外的数据
事实上确实一定程度上实现了逻辑的复用

条件渲染

这里我只是举了一个例子，比如我们日常在开发中，页面多多少少会涉及到一些http请求，那么我们在考虑一种没有工程化处理好http的一些钩子函数（举个例子，如果你使用过axios这个工具类，一般会将拦截器统一配置好，现在是我们没有做这一层），比如说请求中、请求结束一些状态控制，其实也可以采用高阶组件的形式设计

请参照HocTwo.jsx这个文件