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

inversify-inject-decorators

inversify-react

react-inversify

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

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