-
Naravno! Evo početka vašeg React članka o JavaScriptu.
Razumijevanje unutrašnjeg rada Reacta je ključno za svakoga ko radi sa ovom JavaScript bibliotekom u velikoj mjeri. React je open-source, front end, JavaScript biblioteka koja se koristi u dizajniranju korisničkih interfejsa za aplikacije na jednoj stranici. To je sloj prikaza u modelu MVC (Model-View-Controller).
React omogućava programerima da kreiraju velike web aplikacije koje mogu mijenjati podatke, bez ponovnog učitavanja stranice. Veoma je brz i skalabilan. Ali, može postati veoma komplikovano kada se pojave problemi. U ovom članku ćemo secirati jedan uobičajeni problem i ponuditi rješenje.
Uobičajeni problem u Reactu
Nije neuobičajeno, posebno za početnike, da se susreću s problemima pri prenošenju podataka između komponenti. Ovo je kritično jer je glavna svrha React-a da izgradi komponente korisničkog interfejsa; Od vitalnog je značaja da komponente, bilo da se radi o roditeljskom djetetu, djetetu prema roditelju, ili bratu i sestri, komuniciraju. Ali kako to možemo postići?
Rješenje problema
Da bismo ovo riješili, moramo razumjeti jedan fundamentalni koncept o Reactu: tok podataka. U Reactu, podaci se prenose odozgo prema dolje (od roditelja ka djetetu) preko props-a. Ali šta ako trebamo proslijediti podatke od djeteta natrag njegovom roditelju? Ovdje koristimo pametan koncept u React-u – Funkcije kao rekviziti.
Evo kako to radi:
// Parent Component
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
field: ''
};
}
handleChange = (newData) => {
this.setState({ field: newData});
}
render() {
return (
<div>
<ChildComponent onChange={this.handleChange} />
</div>
);
}
}
// Child Component
class ChildComponent extends React.Component {
sendData = () => {
this.props.onChange("Hello, parent!!");
};
render() {
return (
<div>
<button onClick={this.sendData}>Click me!</button>
</div>
)
}
}
U gornjem primjeru, u roditeljskoj komponenti definiramo funkciju handleChange koja poziva this.setState() da ažurira podatke o stanju. Ova funkcija se zatim prosljeđuje kao prop, podređenoj komponenti.
React biblioteke za upravljanje protokom podataka
Iako je React-ov ugrađeni sistem za rukovanje rekvizitima moćan, mnogi programeri traže skalabilnija rješenja za upravljanje protokom podataka u većim aplikacijama. Redux i Mobx su dvije JavaScript biblioteke koje se koriste sa React-om koje pružaju napredno upravljanje stanjem.
- Redux je predvidljivi kontejner stanja za JavaScript aplikacije zasnovan na obrascu dizajna Flux. Omogućava programeru da upravlja stanjem aplikacije na predvidljiv način.
- Mobx je jednostavnija biblioteka koja provodi iste principe Fluxa, ali na konceptualno jednostavniji način primjenom funkcionalnog reaktivnog programiranja.
Da zaključimo stvari, React pruža jednostavan, efikasan način da komponente komuniciraju putem rekvizita i funkcija. Za velike aplikacije, korištenje moćnih biblioteka kao što su Redux ili Mobx može uvelike pojednostaviti upravljanje stanjem. Nastavite istraživati i sretno kodiranje!
