Dacă luați un lucru care este menționat în multe forumuri React sau într-un interfață în general, atunci acesta va fi întrebarea: cum se face cererea AJAX în aplicațiile despre React.
Cea mai mare confuzie - asta e ceea ce într-adevăr de multe ori reacționăm touted ca freymvork, iar oamenii care au lucrat cu freymvorkami, cum ar fi obișnuit unghiulară de lucru cu apeluri API, cu lucruri cum ar fi $ ajutoare, cum ar fi http și biblioteci oferite de angular. În cazul React, situația este diferită, deoarece React este o bibliotecă de vizualizare "simplă", cu metode de control al statului și de ciclul de viață.
Deci, cum faceți o solicitare AJAX, dacă biblioteca nu vă oferă acest lucru din cutie?
Aveți dreptul să utilizați în mod liber bibliotecile terților (alte biblioteci mici care rezolvă anumite sarcini). Aveți posibilitatea să utilizați implementarea nativă a browserului de preluare (de asemenea, ați putea dori să includeți polywill-ul care să-l folosească pentru a prelua preluarea în browserele mai vechi) sau să utilizați axios. Personal prefer acest lucru, deoarece Axios are un simplu API și funcționează în majoritatea browserelor.
Tot ce trebuie să lucrați cu axios este să știți cum promite promisurile - chiar dacă ați folosit vreodată jQuery.ajax, trebuie deja să înțelegeți ce și cum.
Să explicăm elementele de bază ale utilizării unei simple interogări GET:
Trimiteți o solicitare GET unui anumit URI și înregistrați răspunsul. Axios implică deja că răspunsul va fi în formatul JSON al obiectului, deci nu este necesar să specificăm variante suplimentare.
După cum puteți vedea, crearea unei cereri AJAX în React nu este mult diferită de crearea acesteia în JQuery sau Angular. Întrebarea adevărată este asta.
Când sau unde fac o solicitare AJAX?
Când dezvoltați aplicația și fluxul de lucru, trebuie să vă gândiți în prealabil cum va fi aranjat fluxul de date în aplicația dvs.:
- Care dintre componente va putea trimite o cerere de date?
- Cum vor fi transferate datele către alte componente?
- Vor fi implementate mai multe acțiuni care pot fi utile în alte cazuri (descărcarea de informații suplimentare despre postare pe această pagină, încărcarea informațiilor pe pagină, afișarea unor postări similare)?
Iată câteva modalități bune de "cea mai bună practică" pentru a rezolva această problemă, unde să folosiți interogarea AJAX:
componentWillMount
Componenta ta, ca în exemplul nostru
În cazul în care un răspuns (răspuns), pentru a transmite ID-ul ca o recuzită, componenta noastră va trimite AJAX cerere și apoi, în metoda render () componenta este verificat dacă datele (date) în stare ustavnoleny, conținutul este redat.
Se pare că aceasta este soluția perfectă pentru curent, dar, de asemenea, este considerat un anti-model, din moment ce avem acum sublimului la componenta containerului, care este conectat la elementul de afișare în punerea sa în aplicare, acesta umenshaetsya reutilizabil al componentei.
Primichaniya Traducere: În acest caz, se înțelege că, dacă, de exemplu, se va utiliza componenta blogpost în altă parte, vom avea nevoie, de asemenea, să treacă ID-ul articolului, și fiecare componentă este de fiecare dată pentru a face o cerere de AJAX pentru a obține unele date care sunt relevante pentru el.
Transferul datelor din componenta părinte prin recuzită
În loc de a face o componentă părinte, componenta
Când folosesc conceptul de componentă părinte, trebuie totuși să țineți minte comentariul din metoda anterioară AJAX de interogare a componentei la implementarea ei. Ar trebui, dacă este posibil, să evitați utilizarea unei mulțimi de containere / componente inteligente în aplicația dvs.
Utilizând un manager de stat, cum ar fi flux, redux sau mobx.
În plus față de decizia de a fi un bonus pe care suntem acum în măsură să facă o cerere de AJAX de oriunde din aplicație, care ne-a placut (atunci când schimbați URL-ul, în componentWillMount metoda, la evenimentul de pe server prin intermediul prize), iar când vom obține datele noastre și să le vom transfera în magazin, iar componentele noastre vor fi actualizate corespunzător.
Anexa 2 - face frumos
Acum că știm cum să obținem date prin API, trebuie să ne asigurăm că utilizatorul știe că sa întâmplat ceva. Pentru a face acest lucru, vom corecta ușor metoda rendering ():
Datorită verificării dacă există date, putem decide dacă să afișăm conținutul către utilizator sau să arătăm că conținutul este în continuare descărcat. Exemplu de implementare a acestei soluții:
Arată mai bine, nu? Uită-te la asta: facebook-content-placeholder-deconstruction. pentru a înțelege modul în care facebook bate jocul în timp ce este încărcat. Desigur, puteți adăuga orice preloader, oricare doriți
Articole similare
Trimiteți-le prietenilor: