Reactの上位コンポーネントの使い方を詳しく解説

php中世界最好的语言
リリース: 2018-06-04 10:48:55
オリジナル
1563 人が閲覧しました

今回はReactハイエンドコンポーネントの使い方について詳しく解説します。Reactハイエンドコンポーネントを使用する際の注意点は何ですか?実際の事例を見てみましょう。

とは 高次コンポーネントは、コンポーネントを受け取り、新しいコンポーネントを返す関数です。副作用はありません。

コンポーネントの共通ロジックをカプセル化して抽象化するために

を使用する理由は、ロジックのこの部分をコンポーネント間でより適切に再利用できるようにするためです。

使い方

//hoc为我们的高阶组件,可以使用es7装饰器语法来使用高阶组件
//当然也可以不用es7,如:let hocHello = hoc(Hello),只是es7的语法更优雅一些。
//高阶组件可以叠加使用,可以对一个组件使用多个高阶组件
@hoc       
class Hello extends React.Component {
 //
}
ログイン後にコピー

実装方法

プロパティプロキシ

次の例は最も単純な実装です

function hoc(ImportComponent) {
 return class Hoc extends React.Component {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})` //displayName是设置高阶组件的显示名称
 render() {
  return <ImportComponent {...this.props} />
 }
 }
}
function getDisplayName(Component) {
 return Component.displayName || Component.name || "Component"
}
ログイン後にコピー

関数: props、refsを操作してコンポーネントインスタンスを取得します

注意事項: 静的メソッドは使用できません渡されました。手動でコピーする必要があります。参照は渡せません。

逆継承

次の例は最も単純な実装です

export function hoc(ImportComponent) {
 return class Hoc extends ImportComponent {
 static displayName = `Hoc(${getDisplayName(ImportComponent)})`
 render() {
  return super.render()
 }
 }
}
ログイン後にコピー

関数: 状態を操作する; レンダリングハイジャック (レンダリング関数を操作する)

注: ライフサイクルを含むいくつかの静的メソッドに加えて、ImportComponent を継承することによって、状態、およびさまざまな関数はすべて利用できます。

原則

  1. 元のコンポーネントを変更しないでください。上位コンポーネントは、組み合わせを通じてサブコンポーネントをコンテナコンポーネントにラップするだけです。これは副作用のない純粋な関数です。

  2. render メソッド内で高次のコンポーネントを使用しないでください。

  3. 高次コンポーネントはコンポーネントに機能を追加できますが、機能を大幅に変更するべきではありません。

  4. デバッグを容易にするために、それが高次コンポーネントの結果であることを示す表示名を選択します。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

HTMLにプレースホルダー属性のプロンプトテキストを実装するJSの操作方法

JSのカウントダウン回復ボタンクリック機能の使い方

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

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート