web-dev-qa-db-ja.com

React js-HOCとデコレータの違いは何ですか

誰かがこれら2つの違いを説明できますか?構文の違いを除いて、これらのテクニックは両方とも同じことを達成するために使用されますか(コンポーネントロジックを再利用することですか)?

16
itay312

すべての実用的な理由から、デコレータとHOCは同じことを行います。

主な違いの1つは、デコレーターを追加すると、プロパティ/クラスは装飾された形式でのみ使用できることです。 HOCパターンは、高次と低次のコンポーネントを使用できるようにします。

デコレータの詳細について-> https://medium.com/google-developers/exploring-es7-decorators-76ecb65fb841
Decoratorsは、広く実装されているJS機能ではありません。まだ提案段階です。デフォルトでは、Babel 7ではステージ0構成のデフォルトプラグインとしてデコレータが許可されています。 https://babeljs.io/docs/plugins/transform-decorators/

10
Jeff P Chacko

なぜReactコミュニティがこれを呼び出すか高次コンポーネント(HOC)ではなく Decorator pattern 、それはまさにそれがやっていることのようであり、そして Gang of Four(GoF)によって1994(!)で説明されています):Erich Gamma、Richard Helm、Ralph Johnson、およびJohn Vlissides

さらに混乱の原因は、 ES7のデコレータパターン がGoFのデコレータパターンの説明とは異なることです。それが残念なことです。既存の用語を再定義するのではなく、修飾してもその用語を再利用することが望ましいと思いました。そして、それが不可能な場合でも、別の用語を考案する方が受け入れられます。

5
Hendy Irawan

2つの違いは、デコレーターを使用して変数を変更することですが、HOCは変更しないことをお勧めします。もう1つはReactに固有であり、HOCはコンポーネントをレンダリングすることになっていますが、デコレーターは実装に応じて異なるものを返すことができます。

3
thedarkone