ホームページ > 記事 > ウェブフロントエンド > React の高次コンポーネントの使用を開始する例を共有する
この記事ではReactの高階コンポーネントの紹介を中心に、高階コンポーネントとは何か、そして高階コンポーネントの使い方について詳しく紹介していきます。参考にしてください。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
高次コンポーネントの定義
HoCはReactのAPIに属さず、本質的には1つ以上のReactコンポーネントをパラメータとして受け取り、新しいReactコンポーネントを返す関数です。このようなコンポーネントは、既存のコンポーネントを改造するのではなく、高次コンポーネントと呼ばれます。開発プロセス中、一部の関数を複数のコンポーネント クラスで再利用する必要がある場合、Hoc を作成できます。
基本的な使い方
ラッピングメソッド
const HoC = (WrappendComponent) => { const WrappingComponent = (props) => ( <p className="container"> <WrappendComponent {...props} /> </p> ); return WrappingComponent; };
上記のコードでは、WrappendComponentは、HoCでpをラップして渡す通常のコンポーネントです。 className 属性、最後の WrappingComponent と受信する WrappendComponent は 2 つの完全に異なるコンポーネントです。
WrappingComponent では、WrappendComponent に渡される props を読み取り、追加、編集、削除できます。また、WrappendComponent を他の要素でラップして、カプセル化スタイルを実装したり、レイアウトを追加したり、その他の操作を行うこともできます。
組み合わせメソッド
const HoC = (WrappedComponent, LoginView) => { const WrappingComponent = () => { const {user} = this.props; if (user) { return <WrappedComponent {...this.props} /> } else { return <LoginView {...this.props} /> } }; return WrappingComponent; };
上記のコードには、WrappedComponent と LoginView という 2 つのコンポーネントがあります。ユーザーが受信 props に存在する場合は、WrappedComponent コンポーネントが通常表示され、それ以外の場合は、LoginView コンポーネントが表示されます。ログインするユーザー。 HoC によって渡されるパラメータは複数にすることができます。たとえば、ユーザーがログインしているときにメイン ページが表示され、ユーザーがログインしていないときにログイン インターフェイスが表示されるように、複数のコンポーネントを渡します。リストをレンダリングするときは、List コンポーネントと Loading コンポーネントを渡して、新しいコンポーネントの動作を追加します。
継承メソッド
const HoC = (WrappendComponent) => { class WrappingComponent extends WrappendComponent { render() ( const {user, ...otherProps} = this.props; this.props = otherProps; return super.render(); } } return WrappingComponent; };
WrappingComponentは、WrappendComponentを継承し、親の機能とプロパティを共有する新しいコンポーネントです。 super.render() または super.componentWillUpdate() を使用して親のライフサイクル関数を呼び出すことができますが、これにより 2 つのコンポーネントが結合され、コンポーネントの再利用性が低下します。
React のコンポーネントのパッケージ化は、使用可能な最小単位の考えに基づいており、コンポーネントは 1 つのことだけを実行します。これは、OOP の単一責任の原則に沿っています。コンポーネントの機能を強化する必要がある場合は、元のコードを変更するのではなく、コンポーネントを組み合わせたり、コードを追加したりして、コンポーネントを強化します。
注意事項
レンダリング関数で高次コンポーネントを使用しないでください
render() { // 每一次render函数调用都会创建一个新的EnhancedComponent实例 // EnhancedComponent1 !== EnhancedComponent2 const EnhancedComponent = enhance(MyComponent); // 每一次都会使子对象树完全被卸载或移除 return <EnhancedComponent />; }
Reactの差分アルゴリズムは、古いサブオブジェクトツリーと新しいサブオブジェクトツリーを比較して、既存のサブオブジェクトを更新するかどうかを決定しますツリーを削除するか、既存の 1 つのサブツリーを破棄して再マウントします。
静的メソッドはコピーする必要があります
// 定义静态方法 WrappedComponent.staticMethod = function() {/*...*/} // 使用高阶组件 const EnhancedComponent = enhance(WrappedComponent); // 增强型组件没有静态方法 typeof EnhancedComponent.staticMethod === 'undefined' // true
Refs属性を渡すことはできません
HoCで指定されたrefは子コンポーネントには渡されず、コールバック関数を通じてpropsを使用して渡す必要があります。関連する推奨事項: ストアを使用して通信コンポーネント間の通信のインスタンス チュートリアルを最適化する
通信コンポーネント間の通信
HTML タグと React コンポーネント_Html/CSS_WEB-ITNOSE を比較する
以上がReact の高次コンポーネントの使用を開始する例を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。