Kann React eine Abhängigkeitsinjektion implementieren?

react kann eine Abhängigkeitsinjektion implementieren. Implementierungsmethode: 1. Verwenden Sie Requisiten, um die Abhängigkeitsinjektion zu implementieren, z. B. „function Welcome(props){return...}“. 2. Verwenden Sie den Kontext, um die Abhängigkeitsinjektion zu implementieren. 3. Verwenden Sie Abhängigkeitsinjektionsbibliotheken wie InversifyJS, um die Abhängigkeitsinjektion zu implementieren .

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Kann React die Abhängigkeitsinjektion implementieren?

Die folgenden gängigen Codes wenden tatsächlich ein paar Beispiele an:

1. Verwendung von Requisiten ermöglicht die Abhängigkeitsinjektion

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

Willkommenskomponente empfängt Requisiten und generiert dann HTML. Seien Sie nicht überrascht, unsere am häufigsten verwendeten Requisiten wenden tatsächlich die Idee der Abhängigkeitsinjektion an.

2. Die Verwendung von Kontext ist eine weitere Möglichkeit, die Abhängigkeitsinjektion zu implementieren

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

Da der Kontext entlang des Komponentenbaums weitergegeben wird, können wir Hooks innerhalb der Komponente verwenden, um ihn zu extrahieren.

3. Die Abhängigkeitsinjektion kann auch nur mit jsx implementiert werden.

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-Parameter wird an die -Komponente übergeben, und die Komponente erhält dann Remote-Daten über die REST-API.

Die -Komponente rendert die Daten jedoch nicht direkt, sondern übergibt die Verantwortung für die Datenwiedergabe an die Unterkomponente . Die Darstellung der -Komponente hängt von ab, und ist der Aufrufer, der diese Abhängigkeit festlegt.

Allerdings können diese Strategien für kleinere Projekte hilfreich sein. In einigen großen Projekten benötigen wir häufig flexiblere Erweiterungen. Zusätzlich zu diesen Basisanwendungen müssen wir auch die Abhängigkeitsinjektion besser unterstützen.

Schauen wir uns einige Bibliotheken an, die die Abhängigkeitsinjektionsunterstützung von React erweitern.

InversifyJS

InversifyJS ist eine leistungsstarke, leichte Abhängigkeitsinjektionsbibliothek und sehr einfach zu verwenden, aber es gibt immer noch einige Probleme bei der Verwendung mit React-Komponenten.

Da InversifyJS standardmäßig die Konstruktorinjektion verwendet, React Entwicklern jedoch nicht erlaubt, den Konstruktor der Komponente zu erweitern. Nehmen wir ein Beispiel, um zu sehen, wie dieses Problem gelöst werden kann:

inversify-inject-decorators

Diese Toolbibliothek bietet hauptsächlich Methoden wie lazyInject, die eine verzögerte Injektion durchführen können, was bedeutet, dass bei der Objektinitialisierung keine Notwendigkeit besteht um Abhängigkeiten bereitzustellen, ist diese Bibliothek praktisch, wenn wir den Konstruktor nicht ändern können.

Zusätzlich zu der wörtlichen Faulheit besteht ein weiteres sehr wichtiges Merkmal darin, dass Sie inversifyJs in jede Bibliothek oder jedes Framework integrieren können, das die Erstellung von Klasseninstanzen steuert, z. B. React.

inversify-react

inversify-react ist eine Bibliothek, die nur eine Abhängigkeitsinjektion durchführt. Genau wie bei der Verwendung von React Context.Provider können wir auch einen Provider aus dieser Bibliothek erhalten:

react-inversify

Obwohl der Name der vorherigen Bibliothek sehr ähnlich ist, unterscheiden sich die Methoden der beiden Bibliotheken kommt der React-Idee näher, da Objekte als Eigenschaften übergeben und nicht innerhalb der Komponente instanziiert werden.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

Das obige ist der detaillierte Inhalt vonKann React eine Abhängigkeitsinjektion implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!