React は依存関係の注入を実装できますか?

react は依存関係の注入を実装できます。実装方法: 1. "function welcome(props){return...}" など、props を使用して依存関係注入を実装します。 2. コンテキストを使用して依存関係注入を実装します。 3. InversifyJS などの依存関係注入ライブラリを使用して依存関係注入を実装します。 。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

React は依存関係注入を実装できますか?

React は依存関係注入を実装できますか?

次の一般的なコードはすべて、実際には依存関係注入のアイデアを適用しています。

1. props を使用して依存関係の挿入を許可します

function welcome(props) {
  return <h1> Hello, {props.name}</h1>;
}

welcome コンポーネントは props を受け取り、HTML を生成します。驚かないでください。最も一般的に使用される Props は、実際に依存性注入のアイデアを適用します。

2. コンテキストを使用することは、依存関係の挿入を実装するもう 1 つの方法です

function counter() {
  const { message } = useContext(MessageContext);
  return <p>{ message }</p>;
}

コンテキストはコンポーネント ツリーに沿って渡されるため、コンポーネント フック内のコンテキストを使用して次のことを行うことができます。それを抽出します。

3. 依存関係の注入は、jsxx

const ReviewList = props => ( 
  <List resource="/reviews" perPage={50} {...props}> 
    <Datagrid rowClick="edit"> 
      <DateField source="date" /> 
      <CustomerField source="customer_id " /> 
      <ProductField source="product_id" /> 
      <StatusField source="status" /> 
    </Datagrid> 
  </List> 
);

perPage パラメーターのみを使用して実現することもできます。 コンポーネントに渡され、コンポーネントは次の方法でリモート データを取得します。 REST API。

ただし、 コンポーネントはデータを直接レンダリングするのではなく、データをレンダリングする責任をサブコンポーネント に渡します。 コンポーネントのレンダリングは に依存しており、 はこの依存関係を設定する呼び出し元です。

ただし、これらの戦略は小規模なプロジェクトに役立つ場合があります。一部の大規模なプロジェクトでは、より柔軟な拡張機能が必要になることが多く、これらの基本的なアプリケーションに加えて、依存関係の挿入をより適切にサポートする必要もあります。

React の依存関係注入サポートを拡張するいくつかのライブラリを見てみましょう。

InversifyJS

##InversifyJS は強力で軽量な依存関係注入ライブラリであり、使い方は非常に簡単ですが、 React コンポーネントで使用するとまだ問題がいくつかあります。

InversifyJS はデフォルトでコンストラクター インジェクションを使用しますが、React では開発者がコンポーネントのコンストラクターを拡張できないためです。この問題を解決する方法を見てみましょう:

inversify-inject-decorators

このツール ライブラリは主に、lazyInject などのメソッドを提供します。遅延注入 (オブジェクトの初期化時に依存関係を提供する必要がないことを意味します) このライブラリは、コンストラクターを変更できない場合に便利です。

さらに、文字通りの遅延に加えて、もう 1 つの非常に重要な機能は、React などのクラス インスタンスの作成を制御するライブラリまたはフレームワークに inversifyJs を統合できるようにすることです。

inversify-react

inversify-react は、依存関係の注入を実行する独自のライブラリです。 React Context.Provider を使用するのと同じように、このライブラリからプロバイダーを取得することもできます:

react-inversify

名前は前のライブラリとよく似ていますが、ただし、2 つのライブラリのアプローチは異なり、オブジェクトがコンポーネント内でインスタンス化されるのではなくプロパティとして渡されるため、このメソッドは React のアイデアに近いです。

推奨される学習: 「

react ビデオ チュートリアル 」

以上がReact は依存関係の注入を実装できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。