Reactにおけるコンポーネント間の抽象化について詳しく解説

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

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() {...}
}

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

ミックスインの問題

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

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

名前の競合
複雑さの増加
上記は、皆さんのために私がまとめたものです。将来皆さんのお役に立てれば幸いです。

関連記事:

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