Share
Componentele reactive încorporează părți ale interfeței utilizator. Aplicația dvs. completă de aplicații React este redată ca un arbore al mai multor componente imbricate. În funcție de fluxul aplicațiilor, componentele individuale trebuie să efectueze anumite activități înainte și după randare, precum și înainte și după actualizare.
În cele din urmă, curățarea și tratarea erorilor sunt, de asemenea, importante. React oferă o serie de metode de ciclu de viață pe care le puteți înlocui și injecta propria logică în locul potrivit. În acest tutorial veți afla despre ciclul de viață al unei componente React de la leagăn la mormânt, ce metode sunt disponibile în fiecare etapă și când este necesar să le înlocuiți.
Rețineți că folosesc stilul claselor ES6 moderne în acest tutorial.
Voi folosi o componentă numită PopularBar pentru a ilustra toate metodele de ciclu de viață și modul în care se comportă. Codul sursă complet este disponibil pe GitLab.
Bara populară conține două alte componente numite ClickCounter. Fiecare ClickCounter componenta conține un buton cu emoji și afișează de câte ori a fost făcut clic pe acesta adăugat la proprietatea numărului pe care îl primește de la gazda sa. Aici este face() Metodă de ClickCounter:
Accentsconagua
render () return ( lăsați clicCount = this.state.clickCount + 1 this.setState (clickCount: clickCount) This.getTotal () < 100 ? this.getTotal() : "99+" ); Componenta PopularBar redă două componente ClickCounter cu emojis cu degetul mare și degetul mare. Rețineți că în cazul în care propunerea "arată" este falsă, aceasta face o div div. Acest lucru va fi important mai târziu când discutăm despre montare și dezasamblare.
render () if (! this.props.show) retur () întoarcere ()
Componentele reactive există când sunt redate de o componentă părinte sau de o aplicație rădăcină. Dar, înainte ca o componentă să poată fi redată, ea trebuie construită (o singură dată) și montată în DOM virtual (de fiecare dată când este adăugată DOM-ului virtual).
Ordinea evenimentelor este că mai întâi componenta este construită, atunci componentWillMount () se numește metoda, componenta este montată în DOM virtual și apoi componentDidMount ()se numește. Acest lucru vă oferă o mulțime de oportunități de a efectua diferite tipuri de inițializare.
Constructorul pentru o componentă va fi apelat o dată pe aplicație (dacă actualizați pagina în browser-ul dvs., atunci este considerată o nouă aplicație). Aici este constructorul pentru componenta PopularBar. Nu face nimic cu excepția apelului super(), care este necesar, și conectați-vă la consola.
clasa PopularBar extinde Component constructor () super () console.log ('--- Constructorul PopularBar este aici!'Constructorul pentru ClickCounter inițializează clickCount starea la zero:
clasa ClickCounter extinde Component constructor (recuzită) super (props) this.state = clickCount: 0 console.log (props.emoji + '=== constructor ClickCounter este aici!
Acesta este un exemplu perfect al unei inițializări care trebuie făcută o dată pe aplicație. Dacă o componentă ClickCounter este montată de mai multe ori, trebuie să păstreze numărul de clicuri.
componentWillMount () metoda este numită înainte ca componenta să fie montată, deci nu există încă nicio componentă. În general, nu există prea multe lucruri care pot fi făcute în acest stadiu, cu excepția cazului în care aveți o anumită inițializare specială care se întâmplă de fiecare dată când componenta este montată, dar chiar și aceasta poate aștepta până la componentDidMount ()metodă.
Iată implementările de metode pentru PopularBar și ClickCounter:
// Folosind PopularBar componentWillMount () console.log ('--- PopularBar se va monta pe Yay!') // ClickCounter componentWillMount () console.log (this.props.emoji + '=== ClickCounter se va monta. ! ') Poti suna this.setState () aici dacă vrei. În mod evident, recuzele nu sunt accesibile.
Aici, componenta este deja montată și puteți efectua orice lucrare care trebuie să acceseze componenta în contextul DOM virtual. Iată implementările metodelor pentru PopularBar și ClickCounter. Componenta există deja, astfel încât proprietățile sale (recuzită) pot fi accesate și afișate.
(*) Folosind consola.log (), consola.log () --- Consola.log () this.props.emoji + '=== ClickCounter nu a montat numărătoarea:' + this.props.count)
Pentru a rezuma secțiunea de montare, să vedem ordinea evenimentelor din PopularBar și cele două componente ClickCounter pe care le conține. Pentru comoditatea dvs., afișez emoji pentru fiecare ClickCounter, astfel încât acestea pot fi distinse.
--- Constructorul Constructorul este aici! --- PopularBar se va monta. Ura! 👍 === Constructorul ClickCounter este aici! 👍 === ClickCounter se va monta. Ura! 👎 === Constructorul ClickCounter este aici! 👎 === ClickCounter se va monta. Ura! 👍 === ClickCounter sa montat. număr: 5 👎 === ClickCounter sa montat. numar: 8 --- PopularBar a mers. upCount: 5, downCount: 8
În primul rând, PopularBar este construit și al său componentWillMount () se numește metoda. Apoi, constructorul și componentWillMount () se apelează metodele fiecărei componente ClickCounter, urmată de componentDidMount () apeluri la componentele ClickCounter. În cele din urmă, componentDidMount () metoda PopularBar este numită. În general, debitul este imbricat, în care toate subcomponentele trebuie montate complet înainte ca componenta care le conține să fie complet montată.
Odată ce componentul este montat, acesta poate fi redat. Din când în când, starea componentei sau a recuzelor pe care le primește din containerul său se poate schimba. Astfel de schimbări duc la redarea, dar componenta are șansa de a fi anunțată și chiar de a controla dacă redarea ar trebui să se întâmple sau nu.
Există patru metode implicate în procesul de actualizare și le voi acoperi în ordine.
componentWillReceiveProps () metoda se numește atunci când sunt primite noi elemente de recuzită din container. Aveți acces la recuzita curentă prin this.props și la recuzita următoare prin nextProps parametru. Aici este componentWillReceiveProps () metoda ClickCounter.
componentWillReceiveProps (nextProps) console.log (this.props.emoji + '=== ClickCounter va primi recuzită.' + 'următorul popi:' + nextProps.count)
Aveți ocazia aici să verificați ce elemente de recuzită s-au modificat și să modificați starea componentei dacă doriți. Este OK să sunați this.setState () aici.
shouldComponentUpdate () este o metodă cheie. Se numește atunci când sunt primite fie recuzite noi (după componentWillReceiveProps () se numește) sau după ce starea componentei este modificată în altă parte. Dacă nu implementați această metodă, atunci componenta va re-renunța de fiecare dată.
Dar dacă implementați-o și reveniți "false", componenta și componentele copilului nu vor fi redate. Rețineți că dacă starea componentelor copilului este modificată, ele vor fi redimensionate chiar dacă întoarceți întotdeauna "false" de la părinte shouldComponentUpdate ().
Ai acces la următoarea recuzită și la următoarea stare, deci ai toate informațiile necesare pentru a lua o decizie. Componenta ClickCounter afișează 99+ atunci când numărul său depășește 99, deci este necesar să se actualizeze numai dacă numărul este mai mic de 100. Iată codul:
shouldComponentUpdate (nextProps, nextState) lăsați currTotal = this.getTotal () let shouldUpdate = currTotal < 100 console.log(this.props.emoji + '=== ClickCounter should ' + (shouldUpdate ?": 'NOT ') + 'update') return shouldUpdate
componentWillUpdateMethod () se numește după componentă shouldComponentUpdate () doar dacă shouldComponentUpdate () întors adevărat. În acest moment, aveți atâtea recuzită și următoarea stare. Nu puteți modifica starea aici, deoarece aceasta va provoca shouldComponentUpdate () să fie chemat din nou.
Iată codul:
componentaWillUpdate (nextProps, nextState) console.log (this.props.emoji + '=== ClickCounter va actualiza' + 'nextProps.count:' + nextProps.count + 'nextState.clickCount:' + nextState.clickCount
În cele din urmă, după randare, componentDidUpdate () se numește metoda. Este OK să sunați this.setState () aici pentru că redarea pentru schimbarea de stat anterioară a fost deja încheiată.
Iată codul:
componentDidUpdate () console.log (this.props.emoji + '=== ClickCounter sa actualizat')
Să vedem metodele de actualizare în acțiune. Voi genera două tipuri de actualizări. Mai întâi, voi da clic pe butonul pentru degete pentru a declanșa o schimbare de stat:
--- Constructorul Constructorul este aici! PopularBar.js: 10 --- PopularBar se va monta. Ura! PopularBar.js: 14 👍 === Constructor ClickCounter este aici! 👍 === ClickCounter se va monta. Ura! 👎 === Constructorul ClickCounter este aici! 👎 === ClickCounter se va monta. Ura! 👍 === ClickCounter sa montat. număr: 5 ClickCounter.js: 20 👎 === ClickCounter sa montat. număr: 8 ClickCounter.js: 20 --- PopularBar a montat. upCount: 5, downCount: 8 👍 === ClickCounter trebuie să actualizeze 👍 === ClickCounter va actualiza nextProps.count: 5 nextState.clickCount: 1 👍 === ClickCounter sa actualizat
Rețineți că nextState.clickCount este 1, ceea ce declanșează ciclul de actualizare. Următoarea actualizare va fi cauzată de faptul că părintele transmite noi elemente de recuzită. Pentru a facilita acest lucru, voi adăuga o mică funcție care declanșează la fiecare 5 secunde și mărește numărătoarea cu 20. Acesta este codul din componenta principală a aplicației care conține PopularBar. Schimbarea se va propaga până la ClickCounter.
class app extinde Component constructor () super () this.state = showPopularBar: true, upCount: 5, downCount: 8 componentDidMount () this.timer = setInterval (this.everyFiveSeconds.bind ); everyFiveSeconds () let state = acest stat state.upCount + = 20 this.setState (state)
Aici este ieșirea. Rețineți că aplicația ClickCounter willReceiveProps () a fost apelată metoda și nextState.clickCount rămâne la zero, dar nextProps.Count este acum 25.
--- Constructorul Constructorul este aici! --- PopularBar se va monta. Ura! 👍 === Constructorul ClickCounter este aici! 👍 === ClickCounter se va monta. Ura! 👎 === Constructorul ClickCounter este aici! 👎 === ClickCounter se va monta. Ura! 👍 === ClickCounter sa montat. număr: 5 👎 === ClickCounter sa montat. numar: 8 --- PopularBar a mers. upCount: 5, downCount: 8 👍 === ClickCounter va primi recuzită. următoarea recuzită: 25 👍 === ClickCounter trebuie să actualizeze 👍 === ClickCounter va actualiza nextProps.count: 25 nextState.clickCount: 0
Componentele pot fi demontate și montate din nou și pot apărea erori în timpul ciclului de viață al unei componente.
Dacă o componentă nu este redată de containerul acesteia, aceasta este demonstrată de DOM-ul virtual și de componentele nemontate componentWillUnmount () se numește metoda. The PopularBar nu va reda subcomponentele ClickCounter în cazul în care propunerea spectacolului este falsă. Componenta App redă PopularBar-ul și transmite propunerea de spectacol pe baza casetei de selectare.
Aici sunt App-urile face() metodă:
render () return ()Bar popular
Când utilizatorul deselectează caseta de selectare, PopularBar este încă redat, dar nu redă componentele copilului său, care nu se montează. Iată codul și rezultatul:
componentWillUnmount () console.log (this.props.emoji + '=== ClickCounter va dezmembra :-(') Ieșire: 👍 === ClickCounter va dezmembra :-( 👎 === ClickCounter va dezmembra :-( Nu este componentDidUnmount () deoarece nu există nici o componentă în acest moment.
componentDidCatch () metoda a fost adăugată recent în React 16. Este concepută pentru a ajuta la o eroare în timpul redării, care a dus anterior la mesaje de eroare obscure. Acum, este posibil să se definească componente de graniță specială de eroare care înfășoară orice componentă copil care ar putea arunca erori, iar componenta limită de eroare va fi redată numai dacă a apărut eroarea.
Componentele reactive au un ciclu de viață bine definit, iar metodele speciale vă permit să intergependați logica dvs. și să luați măsuri, să controlați starea la un nivel foarte granular și chiar să rezolvați erorile.
De cele mai multe ori acest lucru nu este necesar, și puteți doar să treci recuzită în jurul și să pună în aplicare face() dar este bine să știți că, în circumstanțe mai specializate, nu veți fi lăsați să priviți la o cutie neagră.
În ultimii ani, React a crescut în popularitate. De fapt, avem un număr de elemente pe piață care sunt disponibile pentru cumpărare, revizuire, implementare și așa mai departe. Dacă sunteți în căutarea unor resurse suplimentare în jurul React, nu ezitați să le verificați.
