U React Nativeu postoje dvije glavne vrste komponenata koje čine aplikaciju: funkcionalne komponente i komponente klase . Oni su strukturirani na isti način kao u uobičajenoj aplikaciji React za web.

Komponente razreda

Komponente klase su klase JavaScript ES2015 koje proširuju osnovnu klasu iz naziva React Component.

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

To daje klasi Apppristup metodama životnog ciklusa React, renderkao i funkciji stanja / rekvizita od roditelja.

Funkcionalne komponente

Funkcionalne komponente su jednostavnije. Oni ne upravljaju vlastitom državom ili imaju pristup metodama životnog ciklusa koje pruža React Native. Oni su doslovno obične stare JavaScript funkcije i ponekad se nazivaju komponentama bez državljanstva.

const PageOne = () => { return ( 
Page One
 ); }

Sažetak

Komponente klase koriste se kao komponente spremnika za rukovanje upravljanjem stanjem i zamotavanje podređenih komponenata.

Funkcionalne komponente obično se koriste samo za prikaz - ove komponente pozivaju funkcije roditeljskih komponenata za rukovanje korisničkim interakcijama ili ažuriranjima stanja.

Više informacija o stanju komponente

Država sastavnica

U Classkomponentama postoji način za pohranu i upravljanje ugrađenim stanjem u 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} - +  ); } }

Država je slična rekvizitima, ali je privatna i u potpunosti je kontrolirana od strane komponente. Ovdje constructor()metoda poziva konstruktor roditeljske klase s super();- Componentje roditeljska klasa Appjer koristimo extendsključnu riječ. constructor()Metoda također inicijalizira komponente, državni objekt:

this.state = { counter: 0 };

Stanje se može prikazati unutar komponente:

{this.state.counter}

Ili ažurirano pozivom:

this.setState({});

Napomena: Osim početnog stvaranja uconstructor()metodivaše komponente, nikada ne biste trebali izravno mijenjati stanje komponente pomoćuthis.state =. Morate koristitithis.setStatekao što se može vidjeti ugornjim funkcijamaincrementCountidecrementCount.

Brojanje se uvećava i smanjuje pozivanjem funkcija proslijeđenih onPressrukovateljima, baš kao što bi bilo i kada biste pozivali obrađivač klikova iz JavaScript-a na webu.

ASIDE: U prvom primjeru je prilagođena komponenta; to je kombinacija i od React Native API:

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

Više informacija o React Native:

• Reagirajte izvorni vodič