今回は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 を継承することによって、状態、およびさまざまな関数はすべて利用できます。
原則
元のコンポーネントを変更しないでください。上位コンポーネントは、組み合わせを通じてサブコンポーネントをコンテナコンポーネントにラップするだけです。これは副作用のない純粋な関数です。
render メソッド内で高次のコンポーネントを使用しないでください。
高次コンポーネントはコンポーネントに機能を追加できますが、機能を大幅に変更するべきではありません。
デバッグを容易にするために、それが高次コンポーネントの結果であることを示す表示名を選択します。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
HTMLにプレースホルダー属性のプロンプトテキストを実装するJSの操作方法
以上がReactの上位コンポーネントの使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。