Babel, Webpack, ES6, React: Importieren des Moduls und Weiterleiten des importierten Moduls als Prop zu Kind

Question

Wenn ich die Bibliothek lodash util (oder eine Bibliothek) in eine übergeordnete Komponente importieren und dann diese importierte Variable als Prop zu übergeben Eine Kindkomponente, von der ich weiß, dass sie dieselbe Bibliothek verwenden wird, bietet dies irgendwelche Vorteile in Bezug auf Leistung oder Aufbauzeit, usw.?

Ich kann mir nicht vorstellen, dass ich eine Importanweisung für die Bibliothek lodash util in der untergeordneten Komponente haben müsste, weil sie als Property existiert, aber gibt es andere Vorteile in Bezug auf die Leistung?

Ist dies ein allgemeines Muster beim Schreiben von Komponenten oder ist es etwas, das getan werden kann, aber nicht unbedingt getan werden sollte?

Answer 1

Wenn Sie Webpack verwenden, gibt es keine Leistungssteigerung, es bringt alles in die gleiche Datei (oder mehrere Dateien, wenn Sie mehrere Chunks machen) und optimiert die Abhängigkeitseinbeziehung, so dass Sie es nicht selbst tun müssen. Wenn etwas, was Sie sagen, wird wahrscheinlich schlechtere Leistung haben, weil Sie die gesamte Bibliothek als eine Stütze zu einer untergeordneten Komponente hinzufügen.

Answer 2

Eine Abhängigkeit als Prop zu übergeben ist im Grunde die Abhängigkeitsinjektion. Es wird alle Vor- und Nachteile geben, die DI innewohnen.

Einer der möglichen DI-Vorteile ist die Testbarkeit. Im React-Ökosystem wird es normalerweise nur für ES-Module mit Jest-Modul-Spott behandelt.

Ein weiterer Vorteil ist die Erweiterbarkeit. Dies funktioniert am besten mit DI-Containern. DI-Behälter in React werden in this article oder this one that uses Angular DI erläutert.

Für eine Bibliothek wie Lodash, die nicht ausgetauscht werden soll, kann dies als Antipattern angesehen werden. ES-Module sollen diesem Zweck dienen.