当前位置:Gxlcms > JavaScript > 有关Vue高阶组件的运用

有关Vue高阶组件的运用

时间:2021-07-01 10:21:17 帮助过:27人阅读

本篇文章主要介绍了探索Vue高阶组件的使用,现在分享给大家,也给大家做个参考。

高阶组件( HOC )是 React 生态系统的常用词汇, React 中代码复用的主要方式就是使用高阶组件,并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins ,并且在 Vue 中很少提到高阶组件的概念,这是因为在 Vue 中实现高阶组件并不像 React 中那样简单,原因在于 ReactVue 的设计思想不同,但并不是说在 Vue 中就不能使用高阶组件,只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。本篇文章主要从技术性的角度阐述 Vue 高阶组件的实现,且会从 ReactVue 两者的角度进行分析。

从 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 ,他们认为 mixinsReact 生态系统中并不是一种好的模式(注意:并没有说 mixins 不好,仅仅针对 React 生态系统),观点如下:

1、 mixins 带来了隐式依赖

2、 mixinsmixins 之间, 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网其它相关文章!

人气教程排行