Vue の高レベルコンポーネントの使用について-jsチュートリアル-php.cn

Vue の高レベルコンポーネントの使用について

亚连

リリース： 2018-06-13 11:45:52

オリジナル

2442 人が閲覧しました

この記事では主に Vue の高レベルコンポーネントの探索の使用方法を紹介し、参考にしていきます。

高次コンポーネント (HOC) は、React エコシステムの一般的な語彙です。React でコードを再利用する主な方法は、高レベルのコンポーネントを使用することです。 -order コンポーネント、これは公式に推奨されるアプローチでもあります。 Vue でコードを再利用する主な方法は mixins を使用することですが、Vue では上位コンポーネントの概念についてはほとんど言及されていません。 Vue での上位コンポーネントの実装は React ほど単純ではないためです。その理由は、React と Vue の違いです。 設計思想は異なりますが、Vue で上位コンポーネントが使えないということではなく、 で上位コンポーネントを使用することで得られるメリットがあるというだけです。 Vue は >mixins と比較されます。質的な変化はありません。この記事では主に Vue の上位コンポーネントの実装を技術的な観点から説明し、React と Vue の両方の観点から分析します。。 HOC )是 React 生态系统的常用词汇， React 中代码复用的主要方式就是使用高阶组件，并且这也是官方推荐的做法。而 Vue 中复用代码的主要方式是使用 mixins ，并且在 Vue 中很少提到高阶组件的概念，这是因为在 Vue 中实现高阶组件并不像 React 中那样简单，原因在于 React 和 Vue 的设计思想不同，但并不是说在 Vue 中就不能使用高阶组件，只不过在 Vue 中使用高阶组件所带来的收益相对于 mixins 并没有质的变化。本篇文章主要从技术性的角度阐述 Vue 高阶组件的实现，且会从 React 与 Vue 两者的角度进行分析。

从 React 说起

起初 React 也是使用 mixins 来完成代码复用的，比如为了避免组件不必要的重复渲染我们可以在组件中混入 PureRenderMixin ：

const PureRenderMixin = require(&#39;react-addons-pure-render-mixin&#39;)
const MyComponent = React.createClass({
 mixins: [PureRenderMixin]
})

ログイン後にコピー

后来 React 抛弃了这种方式，进而使用 shallowCompare ：

const shallowCompare = require(&#39;react-addons-shallow-compare&#39;)
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

React から始める

当初、React は、コンポーネントの不要な繰り返しレンダリングを避けるなど、コードの再利用を完了するために mixins も使用していました。 PureRenderMixin をコンポーネントに混ぜることができます:

rrreee

その後、React はこのメソッドを放棄し、shallowCompare を使用しました:

rrreee これには、 shouldComponentUpdate メソッドをコンポーネント内に自分で追加しますが、このメソッドの特定の作業は shallowCompare、つまり浅い比較によって実行されます。

その後、開発者がコンポーネント内で常に同じコードを記述することを防ぐために、React では React.PureComponent を使用することが推奨されました。つまり、React code> です。彼らは <code>mixins が React エコシステムの良いモデルではないと信じています (注: mixins という意見はありません)。 code>mixins は、React エコシステムの場合のみ有効ではありません)、ビューは次のとおりです:

1. mixins は暗黙的な依存関係をもたらします

2 、 mixins と mixins の間、および mixins とコンポーネントの間では、

mixins<a href="//m.sbmmt.com/js-tutorial-402403.html" target="_blank">3. /code> これは侵入的であり、元のコンポーネントを変更するため、<code>mixins

を変更することは、元のコンポーネントを変更することと同じことになります。需要が増大するにつれて、mixins は複雑になり、雪だるま式に複雑になっていきます。。詳細については、「Mixins は有害であると考えられる」という記事をご覧ください。ただし、HOC は特効薬ではありません。当然、それ自体に問題が生じます。render prop で通常のコンポーネントを使用すると、HOC で実行できることはすべて実行できるということです。

上記は私があなたのためにまとめたものです。

jQueryで再帰無限層関数を実装

JavaScriptで責任連鎖モードを実装する方法

AjaxとJqueryを使ってドロップダウンボックスの二次連携を実装

vueについて-awesome-swiper プラグインの問題

vueでbetter-scrollプラグインを使う方法

jqueryで指定したインデックス値を取得する方法

🎜🎜🎜Vueフレームワークで関連グッズコンポーネント開発🎜 🎜🎜🎜vueで初めてのスタイラスインストール方法の使用（詳細チュートリアル）🎜🎜🎜🎜expressとkoaの使用比較（詳細チュートリアル）🎜🎜🎜🎜vueのオンライン有料コース（詳細チュートリアル）🎜🎜

以上がVue の高レベルコンポーネントの使用についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。