Astăzi voi evidenția elementele de bază ale lumii React. Dacă tocmai ți-ai început călătoria în ReactJS, atunci aș spune că ai aterizat în locul potrivit. În acest articol, am încercat să abordez elementele de bază ale React într-un mod foarte simplu. Sper că la sfârșitul articolului veți cunoaște conceptele fundamentale ale React.
Să începem.
ReactJS – O bibliotecă puternică
Așa cum ați fi citit deja în multe locuri, React este o bibliotecă pentru crearea de interfețe web și mobile. A fost dezvoltat de Facebook.
ReactJS este bazat pe componente. Totul este o componentă care este responsabilă pentru anumite funcționalități. Scrii componente mici, mici și apoi le combini pentru a forma componente mari. Acest lucru face codul mai lizibil și mai ușor de înțeles. Caracteristicile care fac React puternic și frumos sunt:
- Folosește conceptul DOM virtual în locul DOM-ului real.
- Citibilitatea codului din cauza JSX. Folosirea JSX vă face să vă simțiți ca și cum ați scrie aplicații web (oferă un aspect JavaScript ca HTML).
- De asemenea, folosește SSR (SSR ajută la SEO).
Acestea sunt lucrurile despre care ați fi putut citi, dar veți ajunge să înțelegeți și să simțiți când parcurgeți acest tutorial. Deci, să ne scufundăm în conceptul DOM virtual (aș spune că aceasta este principala caracteristică care face React mai frumos).
ReactJS Virtual DOM
DOM-ul virtual este o copie a DOM-ului real. Spre deosebire de DOM-ul real, DOM-ul virtual face cantitatea minimă de manipulare DOM pentru a menține componentele actualizate. Actualizează doar partea care a fost actualizată.
Manipularea DOM este foarte ușoară. Iată o demonstrație vizuală a modului în care funcționează DOM-ul virtual:
- DOM-ul virtual este o copie a DOM-ului real.
2. Când datele se schimbă într-o componentă, întreaga interfață de utilizare este redată în DOM virtual.
3. Apoi are loc comparația dintre DOM-ul real și DOM-ul virtual.
4. După efectuarea calculului, DOM-ul real este actualizat cu lucrurile care sunt schimbate.
Am vorbit despre una dintre caracteristicile extraordinare ale React – adică DOM-ul virtual, dar așteaptă! Ce a fost JSX în cea de-a doua caracteristică (punctele de deasupra caracteristicii)? S-ar fi putut să vă întrebați ce este, ce legătură are cu React și cum ne dă senzația de a scrie aplicații web …
Acum, de data aceasta, să ne scufundăm în piscina JSX.
JSX
Înainte de a merge mai departe, să aruncăm o privire asupra codului de mai jos:
class FirstComponent extends React.Component {
render() {
return (
<span className="customSize">My First Component</span>
);
}
}class FirstComponent extends React.Component {
render() {
return (
React.createElement('span',{className: 'customSize'}, 'My First Component')
);
}
}În primul exemplu, funcția de redare arată că returnează cod HTML, dar acesta este JSX. primul exemplu este o versiune JSX a celui de-al doilea. JSX este o extensie JavaScript care oferă codului dvs. JS un aspect HTML.
Dacă vă uitați la al doilea exemplu, React.createElement este utilizat pentru crearea unui element de reacție care să reprezinte componenta de reacție. Al doilea argument poate fi nul sau gol dacă nu sunt necesare elemente de recuzită sau atribute pentru element. Al treilea argument definește ceea ce ar trebui să fie în interiorul său (ca orice alt element React, să spunem , cu atributul „src”).
Dacă vă uitați la cele două blocuri de cod de mai sus, îl veți găsi pe primul mai familiar deoarece oferă o senzație HTML. JSX crește, de asemenea, lizibilitatea codului. Să aruncăm o privire la un alt exemplu, fără JSX și cu JSX pentru a avea o impresie a lizibilității codului.
ReactJS fără JSX:
React.createElement("div", null,
React.createElement("img", {src: "https://www.freecodecamp.org/news/start-your-journey-into-the-world-of-react-by-learning-these-basics-d6e05d3655e3/image.jpg", alt: "Random photo"}),
React.createElement("h3", null, "Hello React"));ReactJS cu versiunea JSX:
<div>
<img src="https://www.freecodecamp.org/news/start-your-journey-into-the-world-of-react-by-learning-these-basics-d6e05d3655e3/image.jpg" alt="Random photo" />
<h3>Hello React</h3>
</div>Privind exemplul de mai sus, puteți înțelege ceea ce spuneam cu privire la lizibilitatea codului. Cât de ușor este să citești codul cu JSX, nu? Cred că acest lucru este suficient pentru JSX și sper că acum veți putea înțelege mai bine puterea JSX în lumea React.
Notă – Browserele nu pot citi JSX. Deci, trebuie să-l transpileți în JavaScript folosind transformatoare JSX (să spunem babel), astfel încât browserul să poată înțelege.
Acum știm ce este JSX. Dar aș vrea să mergeți la poza anterioară unde am scris că React este vorba despre componente. Este condus de componente. Deoarece componentele sunt elementele de bază ale React, să le explorăm.
ReactJS Heart – Componente
Ei bine, este posibil să fi întâlnit codul de mai jos despre cum să creați componente în timpul cercetării dvs. despre React:
class MyStatefulComponent extends React.Component {
state = {
title: ''
}
componentDidMount() {
console.log('Component mounted')
}
render() {
return <div>{this.props.name}</div>;
}
}Dacă scrieți componenta dvs. în modul de mai sus, aceasta se numește a Clasa / Stare / Container componentă. Dacă credeți că acesta este singurul mod de a crea componente, gândiți-vă din nou. Da, există un alt mod de a crea componenta dvs. care are ca rezultat componente funcționale / fără stat / de prezentare. Înainte de a merge mai departe, să vedem cum sunt scrise componentele funcționale:
const MyStatelessComponent = props => <div>{props.name}</div>;Acum, s-ar putea să vă întrebați care este diferența dintre cele două și cum ar trebui să alegeți ce tip să creați. Deci, să ne scufundăm în grupul de componente Stateful și Stateless.
Apatrizi (sau prezențiali sau funcționali) componentele sunt acele componente care nu au nicio stare (nu știu despre stare? Nu vă faceți griji, o explic într-o parte ulterioară). Acestea sunt folosite pentru prezentare, cum ar fi cum doriți să arate componenta dvs.
O componentă este o funcție JavaScript simplă care ia un argument drept argument și returnează un element React (vezi exemplul de mai sus). Numele său se explică de la sine – nu are stare. Nu are metode ale ciclului de viață (cum ar fi componentDidMount metoda etc. pe care ați fi putut-o citiți în timpul cercetării dvs. despre tutorialele React).
Stare (sau container sau clasă) componentele sunt acele componente care au stare – o sursă de date (poți apela this.setState în interiorul său), metode ale ciclului de viață (pot fi utilizate pentru a efectua un apel API). Este o clasă JavaScript care extinde componenta dvs. React, ceea ce înseamnă că React creează instanțe ale acesteia. React inițializați clasa de componente pentru a utiliza metode ale ciclului de viață, pentru inițializarea stării și multe altele.
Așteptați … acum s-ar putea să vă întrebați care dintre ele este mai bună și ce să alegeți? Puteți răspunde la această întrebare dacă aveți această întrebare în minte despre cum să separați partea logică de cea prezentativă. Da, este ciudat că o întrebare răspunde la o altă întrebare, dar veți afla în curând de ce am spus asta.
Așa cum ați fi putut vedea în alte tutoriale React, aceștia folosesc clasa pentru crearea componentelor lor. Ei pun părțile logice, precum și cele de prezentare în aceeași componentă, ceea ce face ca componenta să fie mai complicată și mai voluminoasă.
Deci, dacă doriți să vă separați componentele logice de cele de prezentare, atunci clasa de componente este cea mai potrivită pentru lucruri logice, cum ar fi preluarea datelor din API sau modificările de date. Pe de altă parte, dacă componenta dvs. este axată pe lucruri prezentative / funcționale, componenta ar trebui să arate bine.
Pe scurt, aș spune că folosiți ambele. Utilizați clasa de componente atunci când aveți nevoie de unul dintre lucruri (metode ale ciclului de viață, stare) și pentru prezentare, utilizați o componentă funcțională.
Totul este despre componente.
Acum, avem o imagine a modului în care putem scrie componente, dar nu v-am spus cum putem gestiona datele din ele. Cred că fără date, componentele ar fi inutile. Deci, vom arunca o privire asupra modului în care putem gestiona datele unei componente (cum ar fi preluarea datelor dintr-un API, React povestea „stării”, setarea stării și așa mai departe).
Să începem.
Recuzită
„Prop” este prescurtarea proprietăților și aceasta este singura sursă de date din componenta noastră. Poate fi folosit pentru a transmite date către diferite componente. Aștepta! Aș vrea să te întorci acolo unde ți-am spus despre componentele de prezentare și de clasă. Ți-am spus să folosești componente de prezentare pentru a gestiona modul în care ar trebui să arate componenta ta și componente de container pentru manipularea datelor și toate acestea. Corect!
Deci, „prop” este cel pe care îl putem folosi pentru a face legătura dintre aceste două tipuri de componente. Da, puteți utiliza elemente de recuzită pentru a transmite date dintr-o componentă container într-o componentă de prezentare, unde componenta de prezentare va reda vizualizarea cu datele dvs. dinamice. Vă rugăm să aruncați o privire la codul de mai jos pentru a înțelege mai bine:
import {ButtonView} from './button.presentation';
class MyContainerComponent extends React.Component {
state={
text : 'Submit'
}
render() {
return (
<ButtonView btnText={this.state.text}/>
)
}
} export const ButtonView=({btnText})=>(
<div>
<button className="btn btn-info btn-lg">{btnText}</button> </div>
)La fel ca mai sus (folosind elemente de recuzită – „btnText”), puteți separa partea logică de partea de prezentare. Cealaltă caracteristică a recuzită este că sunt doar citite, adică sunt imuabile. Nu vor modifica în interiorul componentei în care sunt trecute. Fluxul de date este, de asemenea, unidirecțional – ceea ce ne oferă legarea datelor într-un singur sens (spre deosebire de Angular).
Dar, ar putea exista cazuri în care dorim să schimbăm datele (cum ar fi, într-un anumit caz, de către utilizator și așa mai departe). Prin urmare, pentru acest caz, „statul” intră pe piața React. Să ne scufundăm în el.
Stat
După cum v-am spus, recuzita este imuabilă, în timp ce starea este pentru date mutabile – adică date care se vor schimba ca răspuns la anumite evenimente. Deci, dacă doriți să modificați valoarea datelor, stocați-le în stare. State sunt obiecte care stochează datele componentei dvs. Pentru a oferi o imagine mai bună a modului în care este definită starea și a modului de utilizare, iată un exemplu:
class LoginContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
userName: "",
};
}
onFilluserName = event => {
this.setState({
userName: event.target.value,
});
}
render() {
return (
<div>
<input value={this.state.userName} onChange= {this.onFilluserName}
</div>
);
}
}Din exemplul de mai sus puteți vedea că starea reprezintă obiecte în care sunt stocate datele componentei dvs. Ele sunt inițializate în interiorul unui constructor. Puteți accesa starea folosind „this.state”. Acesta este modul de utilizare a stării pentru redarea datelor în componenta dvs.
Dar v-am spus că lucrul care face starea inimii componentelor voastre este comportamentul său mutabil. Da, acum se pune problema cum putem schimba proprietatea statului. Răspunsul este folosind „this.setState” (vă rugăm să aruncați o privire la exemplul de mai sus). Folosind this.setState, ne-am schimbat valoarea datelor atunci când utilizatorul tastează.
Pe scurt, recuzita și starea sunt ambele surse de date, dar utilizarea și comportamentul lor sunt diferite. Ori de câte ori există un caz în care datele dvs. se pot schimba, utilizați „stare” pentru asta – altfel „prop” este o alegere bună.
Aici este vorba despre elementele de bază ale lumii React. Sper să înțelegeți mai bine elementele de bază.
Există o parte foarte importantă a unei componente de clasă pe care nu am discutat-o: metodele ciclului de viață. Da, metodele ciclului de viață sunt o altă parte critică a ReactJS, dar ceea ce sunt și de ce sunt importante va fi în următorul meu articol!
Mulțumesc pentru lectură.
