探索Vue高阶组件的使用

2020-06-16 06:24:45易采站长站整理
mixins
React
生态系统中并不是一种好的模式(注意:并没有说
mixins
不好,仅仅针对
React
生态系统),观点如下:

1、

mixins
带来了隐式依赖

2、

mixins
mixins
之间,
mixins
与组件之间容易导致命名冲突

3、由于

mixins
是侵入式的,它改变了原组件,所以修改
mixins
等于修改原组件,随着需求的增长
mixins
将变得复杂,导致滚雪球的复杂性。

具体大家可以查看这篇文章 Mixins Considered Harmful 。不过

HOC
也并不是银弹,它自然带来了它的问题,其观点是: 使用普通组件配合
render prop
可以做任何 HOC 能做的事情 。

本篇文章不会过多讨论

mixins
HOC
谁好谁坏,就像技术本身就没有好坏之分,只有适合不适合。难道
React
Vue
这俩哥们儿不也是这样吗🙂。

ok
,我们回到高阶组件,所谓高阶组件其实就是高阶函数啦,
React
Vue
都证明了一件事儿: 一个函数就是一个组件 。所以组件是函数这个命题成立了,那高阶组件很自然的就是高阶函数,即一个返回函数的函数,我们知道在
React
中写高阶组件就是在写高阶函数,很简单,那是不是在
Vue
中实现高阶组件也同样简单呢?其实
Vue
稍微复杂,甚至需要你对
Vue
足够了解,接下来就让我们一块在
Vue
中实现高阶组件,在文章的后面会分析为什么同样都是
函数就是组件
的思想,
Vue
却不能像
React
那样轻松的实现高阶组件。

也正因如此所以我们有必要在实现

Vue
高阶组件之前充分了解
React