Heim > Artikel > Web-Frontend > 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.
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
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!