Viele Vorlagensprachen haben "Slots" - oder "Yield" -Anweisungen, die eine Art Umkehrung der Steuerung ermöglichen, um eine Vorlage in eine andere zu verpacken.
Angular hat die Option "transclude" .
Rails hat eine Ertragserklärung . Wenn React.js eine Ertragsangabe hätte, würde dies folgendermaßen aussehen:
var Wrapper = React.createClass({
render: function() {
return (
<div className="wrapper">
before
<yield/>
after
</div>
);
}
});
var Main = React.createClass({
render: function() {
return (
<Wrapper><h1>content</h1></Wrapper>
);
}
});
Gewünschte Ausgabe:
<div class="wrapper">
before
<h1>content</h1>
after
</div>
Leider hat React.js keine <yield/>
. Wie definiere ich die Wrapper-Komponente, um die gleiche Ausgabe zu erzielen?
Antworten:
Versuchen:
Siehe mehrere Komponenten: Kinder und Art der Kinder Requisiten in der Dokumentation für weitere Informationen.
quelle
Verwenden von
children
Dies ist auch als
transclusion
Angular bekannt.children
ist eine spezielle Requisite in React und enthält, was sich in den Tags Ihrer Komponente befindet (hier<App name={name}/>
ist drinWrapper
, also ist es daschildren
Beachten Sie, dass Sie nicht unbedingt verwenden müssen
children
, was für eine Komponente eindeutig ist, und Sie können auch normale Requisiten verwenden, wenn Sie möchten, oder Requisiten und Kinder mischen:Dies ist für viele Anwendungsfälle einfach und in Ordnung, und ich würde dies für die meisten Consumer-Apps empfehlen.
Requisiten rendern
Es ist möglich, Renderfunktionen an eine Komponente zu übergeben. Dieses Muster wird im Allgemeinen aufgerufen
render prop
, und diechildren
Requisite wird häufig verwendet, um diesen Rückruf bereitzustellen.Dieses Muster ist nicht wirklich für das Layout gedacht. Die Wrapper-Komponente wird im Allgemeinen verwendet, um einen bestimmten Status zu halten, zu verwalten und in seine Renderfunktionen einzufügen.
Gegenbeispiel:
Sie können noch ausgefallener werden und sogar ein Objekt bereitstellen
Beachten Sie, dass Sie nicht unbedingt verwenden müssen
children
, es ist eine Frage des Geschmacks / der API.Bis heute verwenden viele Bibliotheken Render-Requisiten (React-Kontext, React-Motion, Apollo ...), da diese API für Benutzer einfacher ist als für HOCs. React-Powerplug ist eine Sammlung einfacher Render-Prop-Komponenten. React-Adopt hilft Ihnen bei der Komposition.
Komponenten höherer Ordnung (HOC).
Eine Komponente höherer Ordnung / HOC ist im Allgemeinen eine Funktion, die eine Komponente übernimmt und eine neue Komponente zurückgibt.
Die Verwendung einer Komponente höherer Ordnung kann leistungsfähiger sein als die Verwendung von
children
oderrender props
, da der Wrapper das Rendering einen Schritt voraus kurzschließen kannshouldComponentUpdate
.Hier verwenden wir
PureComponent
. Wenn sich dieWrappedApp
Namensstütze beim erneuten Rendern der App im Laufe der Zeit nicht ändert, kann der Wrapper sagen: "Ich muss nicht rendern, da die Requisiten (eigentlich der Name) dieselben wie zuvor sind." Mit derchildren
obigen basierten LösungPureComponent
ist dies nicht der Fall , selbst wenn der Wrapper vorhanden ist , da das untergeordnete Element jedes Mal neu erstellt wird, wenn das übergeordnete Element gerendert wird. Dies bedeutet, dass der Wrapper wahrscheinlich immer neu gerendert wird, selbst wenn die umschlossene Komponente rein ist. Es gibt ein Babel-Plugin , das dazu beitragen kann, dies zu mildern und ein konstanteschildren
Element über die Zeit sicherzustellen .Fazit
Komponenten höherer Ordnung können Ihnen eine bessere Leistung bieten. Es ist nicht so kompliziert, aber auf den ersten Blick sieht es auf jeden Fall unfreundlich aus.
Migrieren Sie nach dem Lesen nicht Ihre gesamte Codebasis zu HOC. Denken Sie daran, dass Sie auf kritischen Pfaden Ihrer App aus Leistungsgründen möglicherweise HOCs anstelle von Laufzeit-Wrappern verwenden möchten, insbesondere wenn derselbe Wrapper häufig verwendet wird. Es lohnt sich, darüber nachzudenken, ihn zu einem HOC zu machen.
Redux verwendete zunächst einen Laufzeit-Wrapper
<Connect>
und wechselte späterconnect(options)(Comp)
aus Leistungsgründen zu einem HOC (standardmäßig ist der Wrapper rein und verwendetshouldComponentUpdate
). Dies ist die perfekte Illustration dessen, was ich in dieser Antwort hervorheben wollte.Hinweis: Wenn eine Komponente über eine Render-Prop-API verfügt, ist es im Allgemeinen einfach, ein HOC darüber zu erstellen. Wenn Sie also ein lib-Autor sind, sollten Sie zuerst eine Render-Prop-API schreiben und schließlich eine HOC-Version anbieten. Dies ist, was Apollo mit der
<Query>
Render-Prop-Komponente und demgraphql
HOC, das sie verwendet, macht.Persönlich benutze ich beide, aber im Zweifelsfall bevorzuge ich HOCs, weil:
compose(hoc1,hoc2)(Comp)
) als Requisiten zu rendernIch zögere nicht, HOC-Versionen meiner Lieblingswerkzeuge zu verwenden / zu erstellen:
Context.Consumer
compSubscribe
graphql
HOC von Apollo anstelle vonQuery
Render PropMeiner Meinung nach machen Render-Requisiten den Code manchmal lesbarer, manchmal weniger ... Ich versuche, die pragmatischste Lösung gemäß den Einschränkungen zu verwenden, die ich habe. Manchmal ist Lesbarkeit wichtiger als Performances, manchmal nicht. Wählen Sie mit Bedacht und folgen Sie nicht dem Trend von 2018, alles in Render-Requisiten umzuwandeln.
quelle
Zusätzlich zu Sophies Antwort habe ich auch eine Verwendung beim Senden von untergeordneten Komponententypen gefunden, und zwar in etwa so:
quelle
delegate
. Wie haben Sie sie gefunden?