💯 AKTUALIZOVÁNO:Pokročilé vzory komponent React ⚛️

TL;DR

Můj velmi oblíbený kurz byl aktualizován (zcela přehrán) a najdete jej zde:

👇👇👇👇👇👇👇👇👇

kcd.im/advanced-react

👆👆👆👆👆👆👆👆👆

Zde je úvod:

TAKY! Můžete to sledovat v codesandbox přímo zde:

Co je tedy nového?

Tento kurz byl původně publikován v prosinci 2017. Několik měsíců poté, co byl publikován, byl vydán React 16.3.0 s některými novými API, které skutečně zlepšily použitelnost Reactu pro některé z těchto vzorů.

Složené komponenty + kontextové API = ❤️

Kontextové rozhraní API zejména usnadňuje vytváření flexibilnějších komponent:

Zajistěte flexibilitu komponent Compound React

Mám také několik dalších lekcí, které vám ukážou, jak můžete ověřit, že jsou vaši Context Consumers používáni správně:

Ověřit spotřebitele kontextu složených komponent

A tady je další, který vám ukazuje, jak správně používat poskytovatele kontextu, abyste se vyhnuli zbytečnému překreslování vašich spotřebitelů:

Zabraňte zbytečným překreslování složených komponent pomocí React Context

Renderování

Lekce renderovacích rekvizit byly také znovu nahrány, i když nebylo potřeba žádné nové React API, aby to zůstalo úžasným vzorem 😉 Lidé mi řekli, že opravdu oceňují způsob, jakým učím renderovací rekvizity:

Používejte Render Props s React

Stále máme také kolekce rekvizit a vzory pro získání rekvizit, protože ty jsou stále velmi úžasné.

Státní reduktory

Máme několik lekcí, které obsahují zcela nový vzor, ​​který nebyl v původním kurzu že jsem před chvílí implementoval indownshift nazvanývzor redukce stavu :

Implementujte omezovače stavu komponent

Zlepšete použitelnost komponentových omezovačů stavu pomocí typů změn stavu

Ovládací prvky

V minulém kurzu jsme měli ovládací prvky, ale v této aktualizaci jsem to posunul dále, abych měl více lekcí o tomto předmětu a zjednodušil jsem příklady a zároveň udělal implementaci reálnější, takže se můžete soustředit na učení, jak efektivně používat vzor:

Vytvářejte komponenty řízené reakce pomocí ovládacích prvků

Podpora ovládacích prvků pro všechny státy

Podporujte obslužný program změny stavu pro všechny ovládací prvky

Zlepšete použitelnost ovládacích prvků pomocí typů změn stavu

Vzor poskytovatele

Minule jsme měli několik lekcí o vzoru poskytovatelů. S newContext API jsem byl schopen ukázat vše v jediné lekci, protože Context API je vestavěná implementace vzoru poskytovatele! V této lekci předkládám ukázku toho, co je Prop Drilling a jak může Provider Pattern věci značně zjednodušit, takže vaše kódová základna React bude mnohem lépe ovladatelná.

Implementujte vzorek poskytovatele pomocí kontextu reakce

Součásti vyššího řádu

React 16.3.0 zveřejnil nové API s názvem React.forwardRef, které ve velkém zjednodušilo vytváření komponent vyššího řádu (HOC). V této lekci se naučíte, jak to efektivně používat. Zatímco všichni tam venku jsou nadšení pro renderovací rekvizity (vaše jsou skutečně zahrnuty), vyšší komponenty mají stále své místo a hodnotu v diskusi o vzorcích reakcí. Tato lekce vychází z lekce vzoru poskytovatele, takže můžete vidět, jak přeměnit Kontextového spotřebitele na Komponentu vyššího řádu.

Implementujte komponentu vyššího řádu

Teď se na to podívejte!

Moc děkujeme za veškerou podporu s tímto obsahem. Tentokrát je to o 20 minut kratší než minule (přestože má pár lekcí navíc pro úplně nový vzor), protože React se v aktivaci těchto vzorů neustále zlepšuje. Doufám, že se vám to líbí!

👇👇👇👇👇👇👇👇👇

kcd.im/advanced-react

👆👆👆👆👆👆👆👆👆

Sdílejte prosím tento blogový příspěvek a odkaz na kurz se svými přáteli!

https://twitter.com/kentcdodds/status/1002546068884787202