Funktionelle versus klassekomponenter i React Native

I React Native er der to hovedtyper af komponenter, der udgør en applikation: funktionelle komponenter og klassekomponenter . Disse er struktureret på samme måde, som de ville være i en almindelig React-app til internettet.

Klassekomponenter

Klaskomponenter er JavaScript ES2015-klasser, der udvider en basisklasse fra React kaldet Component.

class App extends Component { render () { return ( Hello World! ) } }

Dette giver klassen Appadgang til React-livscyklusmetoderne rendersåvel som tilstand / rekvisita-funktionalitet fra den overordnede.

Funktionelle komponenter

Funktionelle komponenter er enklere. De administrerer ikke deres egen stat eller har adgang til de livscyklusmetoder, der leveres af React Native. De er bogstaveligt talt almindelige gamle JavaScript-funktioner og kaldes undertiden statsløse komponenter.

const PageOne = () => { return ( 

Page One

); }

Resumé

Klassekomponenter bruges som containerkomponenter til håndtering af tilstandsstyring og indpakning af underordnede komponenter.

Funktionelle komponenter bruges generelt kun til visningsformål - disse komponenter kalder funktioner fra overordnede komponenter til at håndtere brugerinteraktioner eller tilstandsopdateringer.

Mere info om komponenttilstand

Komponentstat

I Classkomponenter er der en måde at gemme og administrere tilstand indbygget i React Native.

class App extends Component { constructor () { super(); this.state = { counter: 0 }; } incrementCount () { this.setState({ counter: this.state.counter + 1 }); } decrementCount () { this.setState({ counter: this.state.counter - 1 }); } render () { return (  Count: {this.state.counter} - +  ); } }

Staten ligner rekvisitter, men den er privat og styres fuldt ud af komponenten. Her constructor()kalder metoden kald på forældreklassens konstruktør med super();- Componenter overordnet klasse, Appfordi vi bruger extendsnøgleordet. Den constructor()metode initialiserer også komponentens tilstand objekt:

this.state = { counter: 0 };

Tilstanden kan vises inden for komponenten:

{this.state.counter}

Eller opdateret ved at ringe:

this.setState({});

Bemærk: Bortset fra dets oprindelige oprettelse i din komponentsconstructor()metode, bør du aldrig direkte ændre komponentens tilstand medthis.state =. Du skal brugethis.setStatesom det fremgår afincrementCountogdecrementCountfunktionerne ovenfor.

Tællingen forøges og mindskes ved at kalde de funktioner, der er videregivet til onPresshåndtererne, ligesom de ville være, hvis du kalder en klikhåndterer fra JavaScript på nettet.

ASIDE: I det første eksempel er en brugerdefineret komponent; det er en kombination af og fra React Native API:

const Button = ({ onPress, children, buttonProps, textProps }) => { const { buttonStyle, textStyle } = styles; return (   {children}   ); };

Mere info om React Native:

  • Reager indfødt guide