Reactのコンポーネント間の抽象例の説明

コンポーネントの構築では、通常、さまざまなコンポーネントで共有する必要がある一種の関数が存在します。現時点では、React では主にミックスインと高次コンポーネントを理解します。この記事では、React のコンポーネント間の抽象化についての簡単な説明を主に紹介します。これが非常に優れていると思いますので、参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

mixin

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

ミックスインメソッドをカプセル化する

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 などのコンポーネントを構築するときに mixin 属性を提供します。

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

名前の競合
複雑さの増加
関連する推奨事項:

React でコンポーネントを記述する方法とは何ですか

以上がReactのコンポーネント間の抽象例の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。