时间:2021-07-01 10:21:17 帮助过:27人阅读
高阶组件( HOC
)是 React
生态系统的常用词汇, React
中代码复用的主要方式就是使用高阶组件,并且这也是官方推荐的做法。而 Vue
中复用代码的主要方式是使用 mixins
,并且在 Vue
中很少提到高阶组件的概念,这是因为在 Vue
中实现高阶组件并不像 React
中那样简单,原因在于 React
和 Vue
的设计思想不同,但并不是说在 Vue
中就不能使用高阶组件,只不过在 Vue
中使用高阶组件所带来的收益相对于 mixins
并没有质的变化。本篇文章主要从技术性的角度阐述 Vue
高阶组件的实现,且会从 React
与 Vue
两者的角度进行分析。
从 React 说起
起初 React
也是使用 mixins
来完成代码复用的,比如为了避免组件不必要的重复渲染我们可以在组件中混入 PureRenderMixin
:
const PureRenderMixin = require('react-addons-pure-render-mixin') const MyComponent = React.createClass({ mixins: [PureRenderMixin] })
后来 React
抛弃了这种方式,进而使用 shallowCompare
:
const shallowCompare = require('react-addons-shallow-compare') const Button = React.createClass({ shouldComponentUpdate: function(nextProps, nextState) { return shallowCompare(this, nextProps, nextState); } })
这需要你自己在组件中实现 shouldComponentUpdate
方法,只不过这个方法具体的工作由 shallowCompare
帮你完成,即浅比较。
再后来 React
为了避免开发者在组件中总是要写这样一段同样的代码,进而推荐使用 React.PureComponent
,总之 React
在一步步的脱离 mixins
,他们认为 mixins
在 React
生态系统中并不是一种好的模式(注意:并没有说 mixins
不好,仅仅针对 React
生态系统),观点如下:
1、 mixins
带来了隐式依赖
2、 mixins
与 mixins
之间, mixins
与组件之间容易导致命名冲突
3、由于 mixins
是侵入式的,它改变了原组件,所以修改 mixins
等于修改原组件,随着需求的增长 mixins
将变得复杂,导致滚雪球的复杂性。
具体大家可以查看这篇文章 Mixins Considered Harmful 。不过 HOC
也并不是银弹,它自然带来了它的问题,其观点是: 使用普通组件配合 render prop
可以做任何 HOC 能做的事情 。
上面是我整理给大家的,希望今后会对大家有帮助。
相关文章:
jQuery实现递归无限层功能
JavaScript中如何实现职责链模式
使用Ajax和Jquery实现下拉框的二级联动
有关vue-awesome-swiper插件问题
vue中如何使用better-scroll插件
jquery如何获取指定的索引值
Vue框架中有关goods组件开发
在vue中首次使用stylus安装方法(详细教程)
express与koa的使用对比(详细教程)
在vue中在线付费课程(详细教程)
以上就是有关Vue高阶组件的运用的详细内容,更多请关注Gxl网其它相关文章!