React peut-il implémenter l’injection de dépendances ?

react peut implémenter l'injection de dépendances. Méthode d'implémentation : 1. Utilisez des accessoires pour implémenter l'injection de dépendances, tels que "function Welcome(props){return...}" ; 2. Utilisez le contexte pour implémenter l'injection de dépendances 3. Utilisez des bibliothèques d'injection de dépendances telles que InversifyJS pour implémenter l'injection de dépendances ; .

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

React peut-il implémenter l'injection de dépendances ?

React peut-il implémenter l'injection de dépendances ?

Les codes courants suivants appliquent réellement l'idée de l'injection de dépendances :

1. permet l'injection de dépendances

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

le composant de bienvenue reçoit des accessoires puis génère du HTML. Ne soyez pas surpris, nos accessoires les plus couramment utilisés appliquent en fait l'idée de l'injection de dépendances.

2. L'utilisation du contexte est une autre façon d'implémenter l'injection de dépendances

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

Étant donné que le contexte est transmis le long de l'arborescence des composants, nous pouvons utiliser des hooks à l'intérieur du composant pour l'extraire.

3. L'injection de dépendances peut également être implémentée en utilisant uniquement le paramètre jsx

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 qui est transmis au composant , puis le composant obtient des données distantes via l'API REST.

Cependant, le composant ne restitue pas directement les données, au contraire, il confie la responsabilité du rendu des données au sous-composant . Le rendu du composant dépend de et est l'appelant qui définit cette dépendance.

Cependant, ces stratégies peuvent être utiles pour les petits projets. Dans certains grands projets, nous avons souvent besoin d'extensions plus flexibles. En plus de ces applications de base, nous devons également mieux prendre en charge l'injection de dépendances.

Examinons quelques bibliothèques qui étendent la prise en charge de l'injection de dépendances de React.

InversifyJS

InversifyJS est une bibliothèque d'injection de dépendances puissante et légère, et très simple à utiliser, mais il existe encore quelques problèmes lors de son utilisation avec les composants React.

Parce qu'InversifyJS utilise l'injection de constructeur par défaut, mais React ne permet pas aux développeurs d'étendre le constructeur du composant. Prenons un exemple pour voir comment résoudre ce problème :

inversify-inject-decorators

Cette bibliothèque d'outils fournit principalement des méthodes telles que lazyInject, qui peuvent donner une injection paresseuse, ce qui signifie que lors de l'initialisation de l'objet, il n'est pas nécessaire pour fournir des dépendances. Cette bibliothèque est utile lorsque nous ne pouvons pas changer le constructeur.

De plus, en plus de la paresse littérale, une autre fonctionnalité très importante est qu'elle vous permet d'intégrer inversifyJs dans n'importe quelle bibliothèque ou framework qui contrôle la création d'instances de classe, comme React.

inversify-react

inversify-react est une bibliothèque qui effectue uniquement l'injection de dépendances. Tout comme en utilisant React Context.Provider, nous pouvons également obtenir un Provider à partir de cette bibliothèque :

react-inversify

Bien que le nom soit très similaire à la bibliothèque précédente, les méthodes des deux bibliothèques sont différentes. plus proche de l'idée de React, puisque les objets sont transmis en tant que propriétés plutôt qu'instanciés à l'intérieur du composant.

Apprentissage recommandé : "Tutoriel vidéo React"

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!