Aceasta postare se adreseaza utilizatorilor avansati care doresc sa exploateze modelul HOC. Daca sunteti nou in React, ar trebui sa incepeti prin a citi Documente React.
Componentele de comanda superioara sunt un model excelent care s-a dovedit a fi foarte valoros pentru mai multe biblioteci React. In acest articol vom revizui in detaliu ce sunt HOC-urile, ce puteti face cu ele si limitarile lor si cum sunt implementate.
In anexe, trecem in revista subiecte conexe care nu sunt esentiale pentru studiul HOC, dar am crezut ca ar fi trebuit sa ne ocupam.
Aceasta postare este menita sa fie exhaustiva, asa ca, daca gasiti ceva ce mi-a lipsit, va rugam sa-l raportati si voi face modificarile necesare.
Aceasta postare presupune cunostinte ES6.
Hai sa ne scufundam!
Actualizare decembrie 2019
Incep un blog cu prietenul meu despre React si alte subiecte de programare, va rugam sa va opriti pentru a saluta https://nosleepjavascript.com/
Actualizare ianuarie 2017
Am fost tradusi in coreeana! https://www.vobour.com/book/view/XSSFQ5wBzsCLAbbo4
Si pentru chinezi! https://zhuanlan.zhihu.com/p/24776678
Multumesc mult traducatorilor!
Actualizare august 2016
Am fost tradusi in japoneza! http://postd.cc/react-higher-order-components-in-depth/
Multumesc tuturor pentru interes!
O componenta de ordine superioara este doar o componenta React care infasoara alta.
Acest model este de obicei implementat ca o functie, care este practic o fabrica de clase (da, o fabrica de clase!), Care are urmatoarea semnatura in pseudocodul inspirat de haskell
hocFactory :: W: React.Component => E: React.Component
In cazul in care W ( WrappedComponent ) este React.Component infasurat si E (Enhanced Component) este noul, HOC, React.Component returnat.
Partea „impachetari” a definitiei este intentionat vaga, deoarece poate insemna unul dintre cele doua lucruri:
- Recuzita Proxy: HOC manipuleaza recuzita fiind transmisa la WrappedComponent W ,
- Mostenirea Inversiune: Hoc extinde WrappedComponent W .
Vom explora aceste doua modele in detaliu.
La un nivel inalt HOC va permite sa:
- Reutilizarea codului, logica si abstractia bootstrap
- Renderizeaza Highjacking
- Abstractie si manipulare a starii
- Manipularea accesoriilor
Vom vedea aceste elemente in detaliu in curand, dar mai intai vom studia modalitatile de implementare a HOC-urilor, deoarece implementarea va permite si restrictioneaza ceea ce puteti efectiv face cu un HOC.
In aceasta sectiune vom studia cele doua modalitati principale de implementare a HOC-urilor in React: Proxy Proks (PP) si Inversion Inheritance (II). Ambele permit moduri diferite de manipulare a WrappedComponent .
Props Proxy (PP) este implementat in mod trivial in urmatorul mod:
Partea importanta aici este ca metoda de redare a HOC returneaza un React Element de tipul WrappedComponent . Trecem, de asemenea, prin recuzita pe care o primeste HOC, de unde si numele Props Proxy .
NOTA:
<WrappedComponent {… this.props} />
// este echivalent cu
React.createElement (WrappedComponent, this.props, nul)
Amandoi creeaza un React Element care descrie ceea ce React ar trebui sa redea in procesul sau de reconciliere, daca doriti sa aflati mai multe despre React Elements vs Components, consultati acest post de Dan Abramov si consultati documentele pentru a citi mai multe despre procesul de reconciliere.
Ce se poate face cu Props Proxy?
- Manipularea recuzita
- Accesarea instantei prin Ref
- Stat abstractizant
- Infasurarea componentului WrappedComponent cu alte elemente
Manipularea recuzita
Puteti citi, adauga, edita si elimina recuzita care este transmisa catre WrappedComponent .
Aveti grija la stergerea sau editarea elementelor de recuzita importante, probabil ca ar trebui sa va spationati numele de recuzita pentru ordinul superior pentru a nu rupe componentul Wrapped .
Exemplu: Adaugarea de recuzite noi. Utilizatorul curent conectat al aplicatiei va fi disponibil in WrappedComponent prin intermediul this.props.user
Accesarea instantei prin Ref
Puteti accesa acest lucru (instanta WrappedComponent ) cu un ref , dar veti avea nevoie de un proces initial complet de redare normala a WrappedComponent pentru ca ref sa fie calculat, ceea ce inseamna ca trebuie sa returnati elementul WrappedComponent din metoda de redare HOC , lasati React sa faca procesul de reconciliere si chiar atunci veti avea o referinta la instanta WrappedComponent .
Exemplu: In exemplul urmator vom explora cum sa accesati metodele instantei si instanta insasi a WrappedComponent prin refs
Cand WrappedComponent este redat, apelul de apel ref va fi executat, apoi veti avea o referinta la instanta WrappedComponent . Aceasta poate fi utilizata pentru citirea / adaugarea de recuzita de instanta si pentru apelarea metodelor de instanta.
Abstractie de stat
Puteti rezuma starea oferind elemente de recuzita si apeluri catre WrappedComponent , foarte asemanator cu modul in care componentele inteligente vor face fata componentelor stupide. Consultati componente stupide si inteligente pentru mai multe informatii.
Exemplu: In urmatorul exemplu de abstractizare a starii, abstractizam naiv valoarea si gestionarul onChange al campului de introducere a numelui. Spun cu naivitate pentru ca acest lucru nu este foarte general, dar trebuie sa vedeti rostul.
L-ati folosi astfel:
Intrarea va fi o intrare controlata automat.
Pentru o legatura de date mai generala bidirectionala HOC, consultati acest link
Infasurarea componentului WrappedComponent cu alte elemente
Puteti infasura WrappedComponent cu alte componente si elemente pentru stil, aspect sau alte scopuri. Unele utilizari de baza pot fi realizate de componentele parinte obisnuite (vezi Anexa B), dar aveti mai multa flexibilitate cu HOC-urile asa cum a fost descris anterior.
Exemplu: Impachetare in scopuri de coafare
Inheritance Inversion (II) este implementat in mod trivial astfel:
Dupa cum puteti vedea, clasa a revenit HOC (Enhancer) se extinde WrappedComponent. Se numeste Inheritance Inversion deoarece, in loc ca componenta WrappedComponent sa extinda o anumita clasa Enhancer, este extinsa pasiv de Enhancer . In acest fel, relatia dintre ei pare inversa .
Inheritance Inversion permite HOC sa aiba acces la instanta WrappedComponent prin aceasta , ceea ce inseamna ca are acces la starea, elementele de recuzita, carligele ciclului de viata ale componentelor si metoda de redare .
Nu voi intra in prea multe detalii despre ce puteti face cu carligele ciclului de viata, deoarece nu este specific HOC, ci React specific. Retineti insa ca cu II puteti crea noi carlige pentru ciclul de viata pentru WrappedComponent. Nu uitati sa apelati intotdeauna super. [LifecycleHook], astfel incat sa nu rupeti WrappedComponent
Procesul de reconciliere
Inainte de a ne scufunda, sa rezumam cateva teorii.
Elementele React descriu ce va fi redat atunci cand React ruleaza procesul de reconciliere.
Elementele React pot fi de doua tipuri: Sir si Functie. String Type React Elements (STRE) reprezinta noduri DOM si Function Type React Elements (FTRE) reprezinta componente create prin extinderea React.Component.
videosgays tetonas delgadas
compilacion anal coños peludos rubios
viejas muy calientes comic maduras
insesto madurafollando
cinema gropers pornocolombianas
corridas anales casadas follando por dinero
filme porno vechi swingers españoles
monjas folladoras compartiendo novia
jovencita masturbandose hermanas tetonas
tias buenas desnudas lisbianas
hermanos jovenes follando brazzers videos completos
videos porno gay de españoles tetudas españolas
madura en la playa negros follando a blancas
travesti paja pilladas españolas follando
actores porno gay españoles peliculas x vintage
falsos casting porno metart films
porno rural abuelas y nietos xxx
mía kalifa mamadas retro
porno agresivo paginas sexo
travestis maduras tetonas cubanas
Pentru mai multe informatii despre elemente si componente, cititi acest post.
FTRE va fi rezolvat la un arbore STRE complet in procesul de reconciliere al React (rezultatul final va fi intotdeauna elemente DOM).
Acest lucru este foarte important si inseamna ca componentele de inalta ordine de inversiune a mostenirii nu au garantia rezolvarii copacului complet al copiilor .
Inversiunea mostenirii Componentele de inalta ordine nu au garantia rezolvarii copacului complet al copiilor.
Acest lucru se va dovedi important atunci cand studiati Render Highjacking.
Ce poti face cu Inversion de mostenire?
- Renderizeaza Highjacking
- Stare manipulatoare
Renderizeaza Highjacking
Se numeste Render Highjacking, deoarece HOC preia controlul asupra rezultatului de redare al WrappedComponent si poate face tot felul de lucruri cu el.
In Render Highjacking puteti:
- Cititi, adaugati, editati, elemente de recuzita de eliminare in oricare din REACT Elemente scoasa la iesire de randare
- Cititi si modificati arborele React Elements dat de randare
- Afisati conditionat arborele elementelor
- Infasurarea arborelui elementului in scopuri de stil (asa cum se arata in Proxy Proxy)
* randarea se refera la WrappedComponent . metoda de redare
Nu puteti edita sau crea recuzite ale instantei W rappedComponent, deoarece o componenta React nu poate edita recuzita pe care o primeste, dar puteti schimba recuzita elementelor care sunt scoase din metoda de redare .
Asa cum am studiat anterior, HOC II nu au garantia rezolvarii copacului complet al copiilor, ceea ce implica anumite limite ale tehnicii Render Highjacking. Regula generala este ca, cu Render Highjacking, veti putea manipula arborele elementului pe care metoda de redare WrappedComponent il produce nu mai mult, nici mai putin. Daca arborele acelui element include o componenta React Type Type, atunci nu veti putea manipula copiii componentei respective. (Acestea sunt amanate de procesul de reconciliere al lui React pana cand acesta devine efectiv pe ecran.)
Exemplul 1: redarea conditionata. Acest HOC va face exact ceea ce WrappedComponent ar face decat daca this.props.loggedIn nu este adevarat. (Presupunand ca HOC va primi prop loggedIn)
Exemplul 2: Modificarea arborelui React Elements dat de render .
In acest exemplu, daca iesirea redata a WrappedComponent are o intrare ca element de nivel superior, atunci schimbam valoarea in „sa va fie forta” .
Puteti face tot felul de lucruri aici, puteti traversa intregul arbore de elemente si puteti schimba recuzita oricarui element din arbore. Exact asa isi desfasoara activitatea Radium (Mai multe despre Radium in studii de caz).
NOTA: Nu puteti reda Highjack cu Props Proxy.
Desi este posibil sa accesati metoda de redare prin WrappedComponent.prototype.render, va trebui sa batjocoriti instanta WrappedComponent si elementele sale de sprijin si sa gestionati singur ciclul de viata al componentei, in loc sa va bazati pe React. In experimentele mele nu merita si daca doriti sa faceti Render Highjacking, ar trebui sa utilizati Inheritance Inversion in locul Props Proxy. Amintiti-va ca React gestioneaza intern instantele componente si singurul dvs. mod de a face fata instantelor este prin aceasta sau prin referinti.
Stare manipulatoare
HOC poate citi, edita si sterge starea instantei WrappedComponent si puteti adauga mai multe stari, daca aveti nevoie. Amintiti-va ca va deranjati cu starea componentei Wrapped, ceea ce va poate duce la spargerea lucrurilor. In mare parte, HOC ar trebui sa fie limitat la citire sau adaugare de stare, iar acesta din urma ar trebui sa fie spatiat de nume pentru a nu se incurca cu starea WrappedComponent .
Exemplu: Depanare accesand elementele de recuzita si starea WrappedComponent
Acest HOC infasoara WrappedComponent cu alte elemente si afiseaza, de asemenea, recuzita si starea instantei WrappedComponent . JSON.stringify Trucul a fost invatat sa – mi de Ryan Florence si Michael Jackson. Puteti vedea o implementare completa de lucru a depanatorului aici.
Cand infasurati o componenta cu un HOC, pierdeti numele originalului WrappedComponent , care va poate afecta atunci cand dezvoltati si depanati.
Ceea ce fac de obicei oamenii este sa personalizeze numele HOC luand numele componentului WrappedComponent si pregatind ceva. Urmatorul este preluat din React-Redux.
HOC.displayName = `HOC ($ {getDisplayName (WrappedComponent)})` // orclass HOC extinde … {
static displayName = `HOC ($ {getDisplayName (WrappedComponent)})`
…
}
Functia getDisplayName este definita dupa cum urmeaza:
functia getDisplayName (WrappedComponent) {
return WrappedComponent.displayName ||
WrappedComponent.name ||
„Componenta”
}
De fapt, nu este nevoie sa o rescrieti singur, deoarece recompunerea lib ofera deja aceasta functie.
React-Redux
React-Redux este legaturile oficiale Redux pentru React. Una dintre functiile pe care le ofera este conectarea care gestioneaza toate bootstrap-ul necesar ascultarii magazinului si curatarii ulterioare. Acest lucru se realizeaza printr-o implementare Proxy Pro.
Daca ati lucrat vreodata cu Flux pur, stiti ca orice componenta React care este conectata la unul sau mai multe magazine are nevoie de mult bootstrapping pentru a adauga si elimina ascultatori de magazine si pentru a selecta partile starii de care au nevoie. Deci, implementarea React-Redux este destul de buna, deoarece abstractizeaza tot acest bootstrap. Practic, nu mai trebuie sa o scrieti singura!
Radiu
Radium este o biblioteca care imbunatateste capacitatea stilurilor inline prin activarea pseudo-selectorilor CSS in interiorul stilurilor inline. De ce stilurile inline sunt bune pentru dvs. este subiectul unei alte discutii, dar o multime de oameni incep sa o faca si libs-urile precum radium intensifica jocul. Daca doriti sa aflati mai multe despre stilurile inline, incepeti cu aceasta prezentare de Vjeux
Deci, cum permite Radium sa activeze pseudo-selectoarele CSS in linie, cum ar fi hover? Implementeaza un model de Inversion Inheritance pentru a utiliza Render Highjacking pentru a injecta ascultatori de evenimente corespunzatori (elemente noi de recuzita) pentru a simula pseudo-selectoarele CSS ca hover. Ascultatorii evenimentului sunt injectati ca manipulatori pentru recuzita elementului React. Acest lucru necesita ca Radium sa citeasca toate arborele Elements produs de metoda de redare a WrappedComponent si, ori de cate ori gaseste un element cu un stil de recuzita, adauga recuzita de ascultatori de evenimente. Pur si simplu, Radium modifica recuzita arborelui Elementului (ceea ce face Radium este de fapt un pic mai complicat, dar iti dai seama)
Radium expune un API foarte simplu. Destul de impresionant avand in vedere toata munca pe care o realizeaza fara ca utilizatorul sa observe. Acest lucru ofera o privire asupra puterii HOC.
Urmatorul continut este optional si il puteti omite.
Uneori este util sa utilizati parametrii pe HOC-urile dvs. Acest lucru este implicit in toate exemplele de mai sus si ar trebui sa fie destul de firesc pentru dezvoltatorii Javascript intermediari, dar doar pentru a face postul exhaustiv, sa-l acoperim foarte repede.
Exemplu: parametri HOC cu un proxy banal Props. Important este functia HOCFactoryFactory.
Il puteti folosi astfel:
HOCFactoryFactory (params) (WrappedComponent)
// sau
clasa @HOCFatoryFactory (params)
WrappedComponent extinde React.Component {}
Urmatorul continut este optional si il puteti omite.
Componentele parinte sunt doar componente React care au unii copii. React are API-uri pentru accesarea si manipularea copiilor unei componente.
Exemplu: Componentele parinte care isi acceseaza copiii.
Acum vom examina ceea ce componentele parinte pot si nu pot face in contrast cu HOC-uri plus cateva detalii importante:
- Redarea Highjacking-ului (asa cum se vede in Inheritance Inversion)
- Manipulati recuzita interioara (asa cum se vede in Inversiunea mostenirii)
- Stare abstracta. Dar are dezavantajele sale. Nu veti putea accesa starea componentei parinte din afara acesteia decat daca creati in mod explicit carlige pentru aceasta. Acest lucru face ca utilitatea sa sa fie limitata.
- Infasurati cu noi React Elements. Acesta ar putea fi cazul cu o singura utilizare in care componentele parinte se simt mai ergonomice decat HOC. Si HOC-urile pot face acest lucru.
- Manipularea copiilor are unele probleme. De exemplu, daca copiii nu au un singur element radacina (mai multi copii de primul nivel), atunci trebuie sa adaugati un element suplimentar pentru a infasura toti copiii, ceea ce ar putea fi putin greoi pentru marcajul dvs. In HOC-uri, o singura radacina de nivel superior a copiilor este garantata de constrangerile React / JSX.
- Componentele parinte pot fi utilizate in mod liber intr-un arbore de elemente, nu sunt limitate la o singura data pentru fiecare clasa de componente, asa cum sunt HOC-urile.
In general, daca o puteti face cu componentele parinte, ar trebui sa faceti acest lucru, deoarece este mult mai putin hacky decat HOC-urile, dar, asa cum arata lista de mai sus, acestea sunt mai putin flexibile decat HOC-urile.
Sper ca dupa ce cititi aceasta postare sa stiti putin mai multe despre React HOCs. Sunt foarte expresivi si s-au dovedit a fi destul de buni in diferite biblioteci.
React a adus o multime de inovatii, iar oamenii care conduc proiecte precum Radium, React-Redux, React-Router, printre altele, sunt dovezi destul de bune in acest sens.
Daca doriti sa ma contactati, va rugam sa ma urmati pe twitter @franleplant.
Accesati aceasta repo pentru a va juca cu codul cu care am jucat, pentru a experimenta cateva dintre tiparele explicate in aceasta postare.
Creditele se indreapta mai ales catre React-Redux, Radium, acest esential de Sebastian Markbage si propria mea experimentare.
