mixinの高次コンポーネントの使い方を詳しく解説

この記事では、React のコンポーネント間の抽象化についての簡単な説明を主に紹介します。編集者が非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう

今日学びたいコンポーネント間の抽象化ですが、初心者なので何度読んでもわかりませんでした。今回は調べてみることにしました。コンポーネントの構築では、通常、さまざまなコンポーネントで共有する必要がある一種の関数が存在します。このとき、React では主にミックスインと高次コンポーネントを理解します。

mixin

mixin機能は、さまざまなオブジェクト指向言語で広く見られます。Rubyでは、includeキーワードはmixinであり、1つのモジュールを別のモジュールまたはクラスに混合します。

ミックスインメソッドのカプセル化

const mixin = function(obj, mixins) {
 const newObj = obj
 newObj.prototype = Object.create(obj.prototype)
 for(let props in mixins) {
  newObj.prototype[props] = mixins[props]
 }
 return newObj
}
const BigMixin = {
 fly: () => {
  console.log('i can fly')
 }
}
const Big = function() {
 console.log('new big')
}
const FlyBig = mixin(Big , BigMixin)
const flyBig = new FlyBig()
FlyBig.fly() //'i can fly'

一般化されたミックスインメソッドでは、ミックスインオブジェクト内のすべてのメソッドが代入によって元のオブジェクトにマウントされ、オブジェクトの混合を実現します。

ReactのMixin

Reactは、createClassを使用して公式PureRenderMixinなどのコンポーネントを構築するときにミックスイン属性を提供します:

import React from 'react'
import PureRenderMixin from 'react-addons-pure-render-mixin'
React.createClass({
  mixins: [PureRenderMixin]
  
  render() {
    return <p>foo</foo>
  }
})

createClassオブジェクトパラメータに配列mixinsを渡し、必要なモジュールとミックスインをカプセル化します 複数のミックスインを配列に追加することもでき、各ミックスインのメソッドは重複します。通常のメソッドとライフサイクルメソッドの間には区別があります。

異なるミックスインに同じ名前の 2 つの共通メソッドを実装した場合、それらは React で上書きされません。ReactClassInterface のエラーがコンソールに報告され、コンポーネント内でメソッドを複数回定義しようとしたことが示されます。 **そのため、React では Chongming の通常メソッドのミックスインは許可されていません。React ライフサイクルで定義されたメソッドの場合、各モジュールのライフサイクル メソッドが重ね合わされて順次実行されます**。

createClass ミックスインを使用すると、コンポーネントに対して次の 2 つのことが行われることがわかります:

1. ツール メソッド: 一部のツール クラス メソッドはコンポーネントで共有され、各コンポーネントで使用できます。

2. ライフサイクルの継承: ミックスインはライフサイクル メソッドをマージでき、componentDidMount サイクルを定義する場合、React はそれらをマージして非常にインテリジェントに実行します。

ES6 クラスとデコレーター

ここで、es6 クラス メソッドを使用してコンポーネントを構築することをお勧めしますが、ミックスインはサポートされていません。公式ドキュメントには良い解決策がありません。

Decorator は ES 7 で定義された機能で、Java のアノテーションに似ています。デコレータは、実行時に使用されるメソッドであり、redux またはその他のアプリケーション層フレームワークでは、コンポーネントを装飾するためにデコレータが使用されることが増えています。

コア デコレータ ライブラリは、必要な @mixin を実装するいくつかの実用的なデコレータを開発者に提供します。各ミックスイン オブジェクトのメソッドをターゲット オブジェクトのプロトタイプに重ね合わせて、ミックスインの目的を達成します。

import React, { Component } from 'react'
import { mixin } from 'core-decorator'
const PuerRender = {
  setTheme()
}
const Them = {
  setTheme()
}
@mixin(PuerRender, Them)
class MyComponent extends Component {
  render() {...}
}

前述したように、デコレーターはクラスに対してのみ機能しますが、メソッド自体の属性も制御できます。

注: React 0.14 はミックスインを削除し始めました

ミックスインの問題

元のコンポーネントのカプセル化を破壊します

mixin メソッドをメソッドに混ぜてコンポーネントに新しい機能をもたらすことができます。新しいプロパティと状態。これは、維持する必要がある目に見えない状態があることを意味します。ミックスインには相互依存関係があり、依存関係のチェーンを形成し、相互に影響を与える場合もあります。

名前の競合
複雑さの増加
この記事のケースを読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

画像の上位 N 個のカラー値を取得するための JS メソッド

render メソッドを使用したグラフィックスとテキストの詳細な説明

アプレットは .getImageInfo( ) 画像情報を取得します

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