React.js for begyndere - Forklarede rekvisitter og tilstand

React.js er et af de mest anvendte JavaScript-biblioteker, som enhver front-end-udvikler bør kende. At forstå, hvad rekvisitter og tilstand er, og forskellene mellem dem er et stort skridt i retning af at lære at reagere.

I dette blogindlæg vil jeg forklare, hvad rekvisitter og tilstand er, og jeg vil også afklare nogle af de mest stillede spørgsmål om dem:

  • Hvad er rekvisitter?
  • Hvordan videregiver du data med rekvisitter?
  • Hvad er tilstand?
  • Hvordan opdaterer du en komponents tilstand?
  • Hvad sker der, når tilstanden ændres?
  • Kan jeg bruge tilstand i alle komponenter?
  • Hvad er forskellene mellem rekvisitter og tilstand?
Hvis du er en komplet begyndermand for React, har jeg en tutorial-serie om React for begyndere.

Hvad er rekvisitter?

Rekvisitter er en forkortelse for egenskaber, og de bruges til at overføre data mellem React-komponenter. React's datastrøm mellem komponenter er ensrettet (kun fra forælder til barn).

Hvordan videregiver du data med rekvisitter?

Her er et eksempel på, hvordan data kan overføres ved hjælp af rekvisitter:

class ParentComponent extends Component { render() { return (  ); } } const ChildComponent = (props) => { return 

{props.name}

; };

For det første er vi nødt til at definere / hente nogle data fra den overordnede komponent og tildele dem til en underordnet komponents "prop" -attribut.

"Navn" er en defineret prop her og indeholder tekstdata. Derefter kan vi videregive data med rekvisitter, som om vi giver et argument til en funktion:

const ChildComponent = (props) => { // statements };

Og endelig bruger vi punktnotation til at få adgang til propdata og gengive dem:

return 

{props.name}

;

Du kan også se min video for at se, hvordan du bruger rekvisitter:

Hvad er tilstand?

React har et andet specielt indbygget objekt kaldet tilstand, som gør det muligt for komponenter at oprette og administrere deres egne data. Så i modsætning til rekvisitter kan komponenter ikke videregive data med tilstand, men de kan oprette og administrere det internt.

Her er et eksempel, der viser, hvordan man bruger tilstand:

class Test extends React.Component { constructor() { this.state = { id: 1, name: "test" }; } render() { return ( 

{this.state.id}

{this.state.name}

); } }

Hvordan opdaterer du en komponents tilstand?

Staten bør ikke ændres direkte, men den kan ændres med en særlig metode kaldet setState( ).

this.state.id = “2020”; // wrong this.setState({ // correct id: "2020" });

Hvad sker der, når tilstanden ændres?

OK, hvorfor skal vi bruge setState( )? Hvorfor har vi endda brug for selve statsobjektet? Hvis du stiller disse spørgsmål, skal du ikke bekymre dig - du vil snart forstå tilstanden :) Lad mig svare.

En tilstandsændring sker baseret på brugerinput, udløser en begivenhed osv. Desuden gengives reaktionskomponenter (med tilstand) baseret på dataene i tilstanden. Staten har de oprindelige oplysninger.

Så når tilstanden ændres, bliver React informeret og straks gengiver DOM igen - ikke hele DOM, men kun komponenten med den opdaterede tilstand. Dette er en af ​​grundene til, at React er hurtig.

Og hvordan får React besked? Du gættede det: med setState( ). Den setState( )metode udløser re-rendering processen for de opdaterede dele. React bliver informeret, ved, hvilke (n) del (er) der skal ændres, og gør det hurtigt uden at gengive hele DOM.

Sammenfattende er der to vigtige punkter, vi skal være opmærksomme på, når vi bruger tilstand:

  • Staten bør ikke ændres direkte - den setState( )skal bruges
  • Staten påvirker ydeevnen for din app, og den bør derfor ikke bruges unødigt

Kan jeg bruge tilstand i alle komponenter?

Et andet vigtigt spørgsmål, du måske stiller om tilstand, er, hvor vi nøjagtigt kan bruge det. I de tidlige dage kunne tilstand kun bruges i klassekomponenter , ikke i funktionelle komponenter.

Derfor blev funktionelle komponenter også kendt som statsløse komponenter. Men efter introduktionen af React Hooks kan tilstand nu bruges både i klasse og funktionelle komponenter.

Hvis dit projekt ikke bruger React Hooks, kan du kun bruge state in class-komponenter.

Hvad er forskellene mellem rekvisitter og tilstand?

Lad os endelig sammenfatte og se de vigtigste forskelle mellem rekvisitter og tilstand:

  • Komponenter modtager data udefra med rekvisitter, mens de kan oprette og administrere deres egne data med tilstand
  • Rekvisitter bruges til at videregive data, mens tilstanden er til styring af data
  • Data fra rekvisitter er skrivebeskyttet og kan ikke ændres af en komponent, der modtager dem udefra
  • Statlige data kan ændres af sin egen komponent, men er private (kan ikke tilgås udefra)
  • Rekvisitter kan kun overføres fra forældrekomponent til barn (ensrettet flow)
  • Ændring af tilstand skal ske med setState ( )metoden

React.js er et af de mest anvendte JavaScript-biblioteker i dag, som enhver front-end-udvikler bør kende.

Jeg håber, at denne artikel hjælper dig med at forstå rekvisitter og tilstand. Der er også andre vigtige ting at dække om React, og jeg vil fortsætte med at skrive om dem senere i mine følgende artikler.

Hvis du vil lære mere om webudvikling, er du velkommen til at følge mig på Youtube !

Tak fordi du læste!