Løst: reagere eller

-
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!

Relaterte innlegg:

Legg igjen en kommentar