Funkciniai ir klasės komponentai „React Native“

„React Native“ programoje yra du pagrindiniai komponentų tipai: funkciniai komponentai ir klasės komponentai . Jų struktūra yra tokia pati, kaip ir įprastoje „React“ programoje žiniatinkliui.

Klasės komponentai

Klasės komponentai yra „JavaScript ES2015“ klasės, pratęsiančios bazinę „React“ klasę Component.

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

Tai suteikia klasei Appprieigą prie „React“ gyvavimo ciklo metodų, tokių renderkaip tėvų būsenos / rekvizitų funkcionalumo.

Funkciniai komponentai

Funkciniai komponentai yra paprastesni. Jie netvarko savo valstybės arba neturi prieigos prie „React Native“ numatytų gyvavimo ciklo metodų. Jie tiesiogine prasme yra paprastos senos „JavaScript“ funkcijos ir kartais vadinamos komponentais be pilietybės.

const PageOne = () => { return ( 

Page One

); }

Santrauka

Klasės komponentai naudojami kaip konteinerio komponentai tvarkant būsenos valdymą ir vyniojant antrinius komponentus.

Funkciniai komponentai paprastai naudojami tik rodymo tikslams - šie komponentai iškviečia funkcijas iš pirminių komponentų, kad galėtų tvarkyti vartotojo sąveiką ar būsenos atnaujinimus.

Daugiau informacijos apie komponento būseną

Komponento būsena

Be Classkomponentų, yra būdas saugoti ir valdyti valstybę pastatytas reaguoti 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} - +  ); } }

Valstybė yra panaši į atramas, tačiau ji yra privati ​​ir visiškai kontroliuojama komponento. Čia constructor()metodas vadinamas tėvų klasės konstruktoriumi super();- Componentyra tėvų klasė, Appnes mes naudojame extendsraktinį žodį. constructor()Metodas taip pat inicijuoja komponento valstybės objektą:

this.state = { counter: 0 };

Būsena gali būti rodoma komponente:

{this.state.counter}

Arba atnaujinta paskambinus:

this.setState({});

Pastaba: be pradinio komponentoconstructor()metodosukūrimo,niekada neturėtumėte tiesiogiai modifikuoti komponento būsenos naudodamithis.state =. Turite naudotithis.setStatetaip, kaip matyti aukščiauincrementCountirdecrementCountfunkcijose.

Skaičius didinamas ir mažinamas iškviečiant onPresstvarkytojams perduotas funkcijas taip, kaip jie būtų, jei žiniatinklyje paskambintumėte paspaudimų tvarkytuvui iš „JavaScript“.

GALIMAS: Pirmajame pavyzdyje yra pasirinktinis komponentas; tai „ React Native“ API derinys ir iš jos:

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

Daugiau informacijos apie „React Native“:

  • „React Native Guide“