Junior React Native Developer — React-Native-Interviewfragen

Was ist eine Komponente in React Native, und was ist der Unterschied zwischen einer funktionalen und einer Klassen-Komponente?

Eine Komponente ist ein wiederverwendbares Stück UI, geschrieben als Funktion (oder, historisch, als Klasse), die JSX zurückgibt, das beschreibt, was gerendert werden soll. Funktionale Komponenten mit Hooks sind heute der Standard — sie sind übersichtlicher, vermeiden this-Bindungsprobleme, und stateful Logik lässt sich über Custom Hooks zwischen Komponenten wiederverwenden, was mit Klassen-Lifecycle-Methoden nicht ging. Klassen-Komponenten funktionieren noch und tauchen in älteren Codebasen auf, aber neuer Code ist standardmäßig funktional.

Was ist der Unterschied zwischen Props und State?

Props kommen vom Parent, und die Komponente kann sie nicht ändern — behandle sie als reinen Input. State gehört der Komponente selbst, wird mit useState erstellt, und ihn zu ändern löst einen Re-Render aus. Das Label eines Buttons ist meist eine Prop; ob ein Modal gerade offen ist, ist meist State.

Was macht `useEffect`?

Es führt eine Funktion nach dem Render der Komponente aus, für alles, was kein reines Rendering ist — Daten laden, ein Event abonnieren, einen Timer setzen. Das Dependency-Array steuert, wann es erneut läuft, und eine daraus zurückgegebene Cleanup-Funktion kümmert sich um das Abmelden vor dem nächsten Lauf oder beim Unmount. Das Dependency-Array wegzulassen bedeutet, dass der Effekt nach jedem einzelnen Render läuft, was selten das ist, was du willst.

Wie stylst du eine Komponente in React Native?

Mit einem JS-Objekt, meist über StyleSheet.create({...}) gebaut und der style-Prop übergeben — es gibt keine separate CSS-Datei. Das Layout nutzt standardmäßig Flexbox mit flexDirection: 'column', deshalb sind flex: 1, justifyContent und alignItems die meistgenutzten Properties, um Kinder anzuordnen. StyleSheet.create erlaubt React Native außerdem, Styles zu validieren und per ID zu referenzieren, statt bei jedem Render ein neues Objekt zu erzeugen.

Wie wechselst du mit React Navigation zwischen Screens?

Wickle die App in einen Navigator — meist einen Stack-Navigator für das übliche Push/Pop-Muster —, registriere jeden Screen unter einem Namen, und ruf navigation.navigate('ScreenName') aus einem Screen heraus auf, um dorthin zu wechseln. Parameter reisen mit dem Aufruf mit, navigation.navigate('Details', { id: 5 }), und der Ziel-Screen liest sie über route.params zurück. Zurückgehen läuft über navigation.goBack() oder die plattformeigene Zurück-Geste/Taste, die der Stack-Navigator automatisch verdrahtet.

Wie unterscheidet sich React Native von React für das Web?

Es gibt kein DOM und keinen Browser — <View>, <Text> und <Image> ersetzen <div>, <span> und <img> und rendern zu echten nativen UIKit/Android-Views statt zu HTML-Elementen. Styling sind JS-Objekte statt CSS, es gibt kein className, und Browser-APIs wie localStorage existieren nicht — React Native hat eigene Äquivalente wie AsyncStorage. Das Komponentenmodell, Hooks und der unidirektionale Datenfluss sind ansonsten dasselbe mentale Modell wie bei React im Web.