Wiele języków szablonów ma instrukcje „sloty” lub „fed”, które umożliwiają wykonanie pewnego rodzaju inwersji kontroli w celu zawinięcia jednego szablonu w drugi.
Angular ma opcję „przetłumacz” .
Railsy mają deklarację dochodu . Gdyby React.js miał instrukcję fed, wyglądałoby to tak:
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>
);
}
});
Pożądane wyjście:
<div class="wrapper">
before
<h1>content</h1>
after
</div>
Niestety, React.js nie ma <yield/>
. Jak zdefiniować komponent Wrapper, aby uzyskać ten sam wynik?
Odpowiedzi:
Próbować:
Aby uzyskać więcej informacji, zobacz Wiele elementów: Dzieci i Typ rekwizytów dla dzieci w dokumentacji.
źródło
Za pomocą
children
Jest to również znane jako
transclusion
Angular.children
jest specjalnym rekwizytem w React i będzie zawierał to, co jest w tagach twojego komponentu (tutaj<App name={name}/>
jest wewnątrzWrapper
, więc to jestchildren
Pamiętaj, że niekoniecznie musisz używać
children
unikalnego komponentu i możesz także użyć normalnych rekwizytów, jeśli chcesz, lub mieszać rekwizyty i dzieci:Jest to proste i odpowiednie dla wielu przypadków użycia, i polecam to dla większości aplikacji konsumenckich.
renderować rekwizyty
Możliwe jest przekazanie funkcji renderowania do komponentu, ten wzorzec jest ogólnie nazywany
render prop
, achildren
rekwizyt jest często używany do zapewnienia tego wywołania zwrotnego.Ten wzór nie jest tak naprawdę przeznaczony do układu. Komponent opakowania jest zwykle używany do przechowywania i zarządzania niektórymi stanami oraz wprowadzania ich w funkcje renderowania.
Przykład licznika:
Możesz uzyskać jeszcze więcej fantazji, a nawet zapewnić obiekt
Pamiętaj, że niekoniecznie musisz go używać
children
, jest to kwestia gustu / API.Na dzień dzisiejszy wiele bibliotek używa rekwizytów renderujących (kontekst React, React-motion, Apollo ...), ponieważ ludzie uważają, że ten interfejs API jest łatwiejszy niż HOC. React-powerplug to zbiór prostych komponentów render-prop. Reaguj adoptuj pomaga tworzyć kompozycje.
Komponenty wyższego rzędu (HOC).
Składnik wyższego rzędu / HOC jest na ogół funkcją, która pobiera komponent i zwraca nowy komponent.
Użycie komponentu wyższego rzędu może być bardziej wydajne niż użycie
children
lubrender props
, ponieważ opakowanie może mieć możliwość zwarcia renderowania o krok do przodushouldComponentUpdate
.Tutaj korzystamy
PureComponent
. Podczas ponownego renderowania aplikacji, jeśliWrappedApp
nazwa rekwizytu nie zmienia się w czasie, opakowanie może powiedzieć „Nie muszę renderować, ponieważ rekwizyty (właściwie nazwa) są takie same jak poprzednio”. W przypadkuchildren
powyższego rozwiązania bazowego, nawet jeśli opakowanie jestPureComponent
, nie jest tak, ponieważ element potomny jest odtwarzany za każdym razem, gdy moduł nadrzędny renderuje, co oznacza, że opakowanie prawdopodobnie zawsze będzie ponownie renderowane, nawet jeśli opakowany komponent jest czysty. Istnieje wtyczka babel, która może to złagodzić i zapewnić stałychildren
element z czasem.Wniosek
Komponenty wyższego rzędu mogą zapewnić lepszą wydajność. Nie jest to takie skomplikowane, ale z początku wygląda nieprzyjaźnie.
Nie migruj całej bazy kodu do HOC po przeczytaniu tego. Pamiętaj tylko, że ze względów wydajnościowych na krytycznych ścieżkach aplikacji możesz używać HOC zamiast owijek wykonawczych, szczególnie jeśli często używasz tego samego opakowania, warto rozważyć utworzenie HOC.
Redux używał początkowo opakowania środowiska wykonawczego,
<Connect>
a później przełączył się na HOCconnect(options)(Comp)
ze względu na wydajność (domyślnie opakowanie jest czyste i używashouldComponentUpdate
). To idealna ilustracja tego, co chciałem podkreślić w tej odpowiedzi.Uwaga: jeśli komponent ma API renderowania-prop, na ogół łatwo jest utworzyć na nim HOC, więc jeśli jesteś autorem lib, powinieneś najpierw napisać API renderowania-prop, a ostatecznie zaoferować wersję HOC. To właśnie robi Apollo z
<Query>
komponentem render-prop igraphql
używającym go HOC.Osobiście używam obu, ale w razie wątpliwości wolę HOC, ponieważ:
compose(hoc1,hoc2)(Comp)
) w porównaniu do renderowania rekwizytówNie waham się używać / tworzyć wersji HOC moich ulubionych narzędzi:
Context.Consumer
compSubscribe
graphql
HOC Apollo zamiastQuery
renderowania propMoim zdaniem, czasami renderowanie rekwizytów sprawia, że kod jest bardziej czytelny, a czasem mniej ... Staram się stosować najbardziej pragmatyczne rozwiązanie zgodnie z moimi ograniczeniami. Czasami czytelność jest ważniejsza niż występy, a czasem nie. Wybieraj mądrze i nie podążaj za trendem w 2018 r. Polegającym na przekształcaniu wszystkiego w render-rekwizyty.
źródło
Oprócz odpowiedzi Sophie znalazłem również zastosowanie w wysyłaniu typów komponentów potomnych, robiąc coś takiego:
źródło
delegate
, jak to znalazłeś?