Buna tuturor! ? Sper că ați avut un Crăciun fericit, fericit și un An Nou fericit!

2018 a ajuns la sfârșit și are sens pentru mine să încep noul an cu un articol despre Componente de comandă superioară!

Ți-am promis că vei scrie despre asta de când am abordat subiectul când am vorbit despre recuzita de redare și modelele containerelor, așa că are sens să te scufunzi puțin și să-i fii atent!

Personal, nu este unul dintre modelele mele preferate, dar este un instrument puternic de știut, stăpânit și atârnat de centura ta de instrumente.

Rețineți că nu ar trebui să îl folosiți în exces. Aproape tot ce puteți încapsula într-un HOC pe care îl puteți implementa cu siguranță folosind modelul de recuzită de redare – verificați articolul meu despre recuzita de redare Aici – si invers.

01. Ce este o componentă de ordin superior?

O componentă de ordin superior (HOC) este o tehnică avansată în React pentru reutilizarea logicii componentelor. HOC-urile nu fac parte din React API. Acestea sunt un model care provine din natura lui React care privilegiază compoziția față de moștenire.

JavaScript este un limbaj adecvat pentru programarea funcțională, deoarece poate accepta funcții de ordin superior. O funcție de ordin superior este o funcție care poate lua o altă funcție ca argument și / sau care returnează o funcție ca rezultat.

În același mod, a componentă de ordin superior este o funcție care ia (împachetează) o componentă și returnează o componentă nouă.

Funcțiile de ordin superior ne permit să ne abstractizăm asupra acțiunilor, nu doar a valorilor.

HOC-urile sunt frecvente în React libs de la terți, cum ar fi Redux sau React Router. Pun pariu că ați folosit unele dintre ele, poate fără să fiți conștienți de asta.

Scopul principal al unei componente de ordin superior în React este de a partaja funcționalitatea comună între componente fără a repeta codul.

02. Tipuri de componente de ordin superior

Practic, există două tipuri principale de implementare HOC: Accesorii proxy și Inversiunea moștenirii.

Accesorii proxy (ppHOC)

Accesorii HOC-urile Proxy sunt elementar exprimate astfel:

Cum sa va dezvoltati superputerile React cu modelul HOC
propsProxyHOC (implementare standard)

Nu este altceva decât o funcție, propsProxyHOC, care primește o componentă ca argument (în acest caz am numit argumentul WrappedComponent) și returnează o componentă nouă cu WrappedComponent înăuntru.

Rețineți că, atunci când returnăm WrappedComponent, trecem și prin recuzita primită de HOC. Aceasta explică numele dat acestui tip: accesorii proxy.

Când returnăm componenta înfășurată avem posibilitatea de a manipula recuzita și de a abstractiza starea, chiar trecând starea ca o recuzită în componenta înfășurată.

De asemenea, puteți înfășura componenta împachetată cu alte elemente JSX, schimbându-i interfața de utilizare în funcție de nevoile aplicației dvs.

Accesorii proxy HOC sunt utile în următoarele situații:

  1. Manipularea recuzită
  2. Accesarea instanței prin Refs (aveți grijă, evitați să utilizați ref)
  3. Stat abstractizant
  4. Înfășurarea / Compunerea componentului WrappedComponent cu alte elemente

Inversiunea moștenirii (iiHOC)

HOC-urile pentru moștenire inversată sunt exprimate în mod elementar astfel:

1611946447 757 Cum sa va dezvoltati superputerile React cu modelul HOC
inheritanceInversionHOC (implementare standard)

În această situație, clasa revenită se extinde componenta WrappedComponent. Se numește Inheritance Inversion, deoarece, în loc să extindă o anumită clasă Enhancer, componenta WrappedComponent este extinsă pasiv. În acest fel, relația dintre ei pare invers.

Inheritance Inversion oferă accesul HOC la instanța WrappedComponent prin acest, ceea ce înseamnă că puteți utiliza starea, elementele de recuzită, ciclul de viață al componentelor și chiar și metoda de redare.

HOC-urile pentru moștenirea inversiunii sunt utile pentru următoarele situații:

  1. Redă Highjacking
  2. Stare manipulatoare

03. Să ne murdărim mâinile

Bine toată lumea? Pentru a ilustra puțin conceptele prezentate mai sus, să facem niște coduri.

Dacă doriți să jucați mai târziu cu codul pe care îl facem, îl puteți extrage aici de aici repo de-a mea ?.

Să încercăm să implementăm o componentă care returnează un mesaj de bun venit în funcție de utilizatorul care este conectat la sistem.

1611946448 508 Cum sa va dezvoltati superputerile React cu modelul HOC
componenta principală App.js

Mi-am modificat componenta App.js pentru a afișa un anumit text și pentru a reda o componentă numită Bine ați venit la care trec utilizatorul prop.

Ok, putem face asta cu o componentă simplă ca aceasta:

1611946448 147 Cum sa va dezvoltati superputerile React cu modelul HOC
Componenta de bun venit

Dar…

Ce se întâmplă dacă vreau ca componenta să returneze Welcome Guest dacă nu este conectat niciun utilizator?

Ei bine … Pot să fac asta în aceeași componentă Welcome, cu un simplu dacă verifică dacă există un suport pentru utilizator și dacă nu, returnează pur și simplu „Welcome Guest”.

Dar să presupunem că vreau să încapsulez acea logică de utilizat cu mai multe / diferite componente de întâmpinare.

Deci, calea de urmat este să creați un Proxy HOC Props:

1611946449 114 Cum sa va dezvoltati superputerile React cu modelul HOC
recuzităProxy HOC

Ce am făcut aici? Ne-am păstrat componenta de întâmpinare simplă și am creat o funcție JavaScript numită withUser care primește componenta de întâmpinare (WrappedComponent) ca argument și verifică dacă există utilizatorul prop. Dacă nu, returnează doar un simplu „Bun venit invitat!” mesaj.

Acest lucru este foarte util. Imaginați-vă că ați avut 30 de componente de bun venit în diferite limbi (exemplu prostesc, dar are scopul de a încapsula logica într-un HOC).

Bine, așa că acum avem un HOC pentru a verifica dacă există un utilizator conectat, în caz contrar acesta lansează un mesaj de bun venit pentru oaspeți!

Să ne imaginăm acum că informațiile utilizatorului provin dintr-un API extern (Auth0 de exemplu) și intră în aplicația noastră frontend printr-un reductor Redux care gestionează starea aplicației.

Deci, înainte de a verifica dacă există un utilizator, trebuie să verificăm dacă datele sunt încărcate în sistem!

Wow! În acest fel am putea afișa un mesaj de încărcare în timp ce datele nu sunt încărcate!

Deci … pentru acest caz de utilizare, cred că vrem să facem o redare highjacking și să redăm alt lucru dacă datele nu sunt încărcate.

Pentru redarea highjacking, trebuie să folosim un iiHOC. Wow! O astfel de coincidență! Deci, să o facem și să alcătuim împreună cele două HOC-uri? Aceasta va lovi puternic capul unghiei.

1611946450 863 Cum sa va dezvoltati superputerile React cu modelul HOC
propsProxy + inheritanceInversion HOC-uri compuse

Fii atent la ceea ce am făcut:

Am creat un withLoader iiHOC care extinde WrappedComponent. În acest fel își poate accesa recuzita și poate declanșa redări diferite.

În această situație primim propulsorul isLoaded și dacă nu este încărcat, returnăm pur și simplu un mesaj de încărcare! În caz contrar, lăsăm WrappedComponent să se redea prin simpla returnare a super.render ().

În declarația de export, compunem doar două funcții JavaScript, cum ar fi f1 (f2 (f3))). Nimic mai mult de atât!

Există instrumente pentru a compune funcțiile într-un mod mai frumos, dar asta este o altă poveste pentru un alt articol!

04. Nu în ultimul rând

Am încercat să folosesc exemple simple pentru a înțelege conceptele în cel mai curat mod posibil.

Sfatul meu pentru dvs. este că, dacă nu stăpâniți aceste concepte, vă rog să trageți repo-ul meu Aici și joacă-te puțin cu el.

Verificați codul și încercați să-l înțelegeți rând cu rând.

Este nevoie de ceva timp pentru a vă obișnui și a vă simți confortabil făcând acest tip de abstractizare, așa că nu vă pierdeți motivația sau concentrarea cu HOC-uri.

De asemenea, așa cum am spus mai devreme, tot ceea ce am făcut aici poate fi obținut cu recuzită de redare sau model de container, deci nu este obligatoriu să alegeți un HOC sau doi pentru a face un cod curat cu acest tip de încapsulare!

Sper că v-ați distrat la fel de mult citind acest articol pe cât l-am scris eu! Dacă ți-a plăcut cu adevărat, te rog, dă-mi niște palme (nu mai puțin de 50, te rog)? și amintiți-vă întotdeauna să „fiți puternici și codificați-vă!”

De asemenea, dacă doriți explicații mai profunde și mai complexe, vă rugăm să citiți linkurile pe care le-am adăugat la secțiunea Bibliografie de mai jos?

05. Bibliografie

  1. Documentația React

2. Elocvent Javascript

3. Reacționați componentele de ordine superioară în profunzime

Mulțumesc foarte mult!

evedează, decembrie 2018