React で抽象コンポーネントを使用する方法

今回はReactで抽象コンポーネントを使用する方法についてお届けします。実際の事例を見てみましょう。

mixin の機能は、さまざまな

言語に広く存在します。Ruby では、include キーワードは mixin であり、1 つのモジュールを別のモジュールまたはクラスに混合します。 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 は、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 オブジェクト パラメーターに配列 mixin を渡します。 mixins 配列では、各 mixin メソッドと

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

createClass を使用するミックスインがグループ価格に対して 2 つのことを行っていることがわかります:

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

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

ここでは、es6 クラス メソッドを使用してコンポーネントを構築することを好みますが、ミックスインはサポートされていません。公式ドキュメントには良い解決策がありません。 デコレータは ES 7 で定義された機能で、Java のアノテーションに似ています。デコレータは、実行時に使用されるメソッドであり、redux またはその他のアプリケーション層フレームワークでは、コンポーネントを装飾するためにデコレータが使用されることが増えています。

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

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

ミックスインの問題 元のコンポーネントのパッケージを破壊しました

mixin メソッドはメソッドを混合してコンポーネントに新しい機能をもたらすことができ、また新しい props と state ももたらします。つまり、維持する必要がある目に見えない状態がいくつかあります。この形式では、依存関係チェーンも相互に影響を与える可能性があります。この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

$.ajax()メソッドでサーバーからjsonデータを取得する方法

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