-
Sikker! Her er en start på din React-baserte JavaScript-artikkel.
Å forstå den indre funksjonen til React er avgjørende for alle som jobber mye med dette JavaScript-biblioteket. React er et åpen kildekode, grensesnitt, JavaScript-bibliotek som brukes til å designe brukergrensesnitt for enkeltsideapplikasjoner. Det er visningslaget i MVC-modellen (Model-View-Controller).
React lar utviklere lage store nettapplikasjoner som kan endre data, uten å laste inn siden på nytt. Det er veldig raskt og skalerbart. Men det kan bli veldig komplisert når problemer dukker opp. I denne artikkelen vil vi dissekere et vanlig problem og tilby en løsning.
Vanlig problem i React
Det er ikke uvanlig, spesielt for nybegynnere, å støte på problemer med å overføre data mellom komponenter. Dette er kritisk siden Reacts hovedformål er å bygge UI-komponenter; det er viktig at komponenter, enten det er foreldre til barn, barn til foreldre, eller søsken til søsken, kommuniserer. Men hvordan kan vi oppnå dette?
Løsning på problemet
For å løse dette må vi forstå ett grunnleggende konsept om React: dataflyten. I React sendes data ovenfra og ned (foreldre til barn) via rekvisitter. Men hva om vi trenger å sende data fra et barn tilbake til dets forelder? Det er her vi bruker et smart konsept i React – Functions as Props.
Her er hvordan det fungerer:
// 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> ) } }
I eksemplet ovenfor, i den overordnede komponenten, definerer vi en funksjon, handleChange som kaller this.setState() for å oppdatere tilstandsdataene. Denne funksjonen sendes deretter som en rekvisitt til Child-komponenten.
React-biblioteker for å administrere dataflyt
Selv om Reacts innebygde system for håndtering av rekvisitter er kraftig, ser mange utviklere etter mer skalerbare løsninger for å administrere dataflyt i større applikasjoner. Redux og Mobx er to JavaScript-biblioteker som brukes med React som gir avansert tilstandsadministrasjon.
- Redux er en forutsigbar tilstandsbeholder for JavaScript-apper basert på Flux-designmønsteret. Det lar utvikleren administrere tilstanden til applikasjonen på en forutsigbar måte.
- Mobx er et mer enkelt bibliotek som utfører de samme prinsippene for Flux, men på en konseptuelt enklere måte ved å bruke funksjonell reaktiv programmering.
For å avslutte ting gir React en enkel, effektiv måte for komponenter å kommunisere via rekvisitter og funksjoner. For store applikasjoner kan bruk av kraftige biblioteker som Redux eller Mobx forenkle tilstandsadministrasjonen betraktelig. Fortsett å utforske og lykke til med koding!