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

今回は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 サイトの他の関連記事を参照してください。