React Native is een van de populairste softwareframeworks en wordt gebruikt om apps te ontwikkelen zoals Facebook, Instagram en Skype. Als u zich bezighoudt met het bouwen van mobiele apps, is een ervaren React Native ontwikkelaar een must.
Om de juiste persoon voor de baan te vinden, moet u eerst een grondig selectieproces opzetten. Nadat u sollicitanten hebt gescreend aan de hand van een beoordeling van hun React Native-vaardigheden is het sollicitatiegesprek uw kans om de beste kandidaat voor uw bedrijf te vinden door de juiste vragen te stellen.
Het doel is om de ontwikkelaar te vinden met de vaardigheden die het beste passen bij de behoeften van uw organisatie, of het nu gaat om het onderhouden van een bestaande portefeuille met apps of om het bouwen van geheel nieuwe apps.
Met onze 40 React Native-sollicitatievragen hieronder is er genoeg ruimte om sollicitatiegesprekken af te stemmen op uw bedrijfsbehoeften.
We hebben de vragen opgedeeld in drie categorieen, gebaseerd op het ervaringsniveau dat nodig is voor de functie die u zoekt:
Beginner, voor junior React Native ontwikkelaars
Intermediair, voor React Native ontwikkelaars met enige ervaring
Gevorderd, voor senior React Native ontwikkelaars
We hebben voor elke vraag voorbeeldantwoorden opgenomen, zodat u kandidaten effectief kunt beoordelen, zelfs als u zelf geen ervaring hebt met React Native.
U kunt deze beginners sollicitatievragen gebruiken om de vaardigheden en kennis te beoordelen van beginnende of junior React Native-ontwikkelaars aan het begin van hun carriere.
Voorbeeldantwoord:
Sinds de lancering in 2015 heeft React Native een reputatie opgebouwd als een betrouwbaar en effectief JavaScript-framework. Enkele van de belangrijkste sterke punten zijn:
Cross-platform compatibiliteit: Het grootste deel van de code is cross-platform, wat betekent dat ontwikkelaars maar een app hoeven te maken in plaats van twee aparte apps voor zowel iOS als Android
Realtime feedback: React Native biedt een 'hot reloading'-functie waarbij ontwikkelaars de wijzigingen die ze hebben aangebracht meteen kunnen bekijken in een apart voorbeeldvenster
Flexibele gebruikersinterface: De interface van React Native is gelikt en maakt het gemakkelijk voor meerdere ontwikkelaars om samen aan een project te werken
Plugins van derden: React Native is compatibel met veel plugins van derden die kunnen worden gebruikt om het app-ontwikkelingsproces te ondersteunen en te verbeteren
Community: Als populair open-source framework heeft React Native een grote community van ontwikkelaars die kennis uitwisselen
Voorbeeldantwoord:
React Native wordt gebruikt om mobiele apps voor iOS en Android te ontwikkelen, terwijl ReactJS wordt gebruikt om webapps in een webbrowser te bouwen.
Beide gebruiken herbruikbare JavaScript XML-componenten, maar de syntaxis verschilt: terwijl React Native app-view componenten gebruikt zoals en , gebruikt ReactJS HTML-tags zoals en .
Voorbeeldantwoord:
Hybride apps worden ontwikkeld voor gebruik op alle platforms, terwijl native apps worden ontwikkeld voor een specifiek platform. React Native wordt gebruikt voor de ontwikkeling van hybride apps.
Hoewel hybride apps sneller te ontwikkelen zijn en doorgaans minder onderhoud vergen dan native apps, kunnen ze iets slechter presteren dan hun native tegenhangers.
Voorbeeldantwoord:
React Native is een geweldige optie voor het ontwikkelen van een hybride app die geen extreem hoge prestaties vereist.
Cross-platform compatibiliteit betekent dat ontwikkelteams veel tijd kunnen besparen bij het gebruik van React Native in vergelijking met een native framework.
Het is echter mogelijk niet geschikt voor het ontwerpen van complexe apps of als ontwikkelaars nog niet goed bekend zijn met React-code.
Voorbeeldantwoord:
Componenten zijn de bouwstenen van React Native; wanneer ze worden gecombineerd, vormen ze de app als geheel. Enkele van de meest voorkomende componenten zijn:
View, gebruikt om de volledige app-lay-out weer te geven
Text, gebruikt om tekst weer te geven
TextInput, gebruikt om tekst in te voeren
ScrollView, wordt gebruikt om een scrollende container in te voegen
StyleSheet, wordt gebruikt om stijlobjecten in te voegen
Image, wordt gebruikt om afbeeldingen weer te geven
Button, wordt gebruikt om knoppen in te voegen
Voorbeeldantwoord:
Componentgestuurde ontwikkeling (CDD) is een ontwikkelingsmethodologie waarbij het bouwproces verankerd is rond componenten in plaats van objecten. Componenten zijn losjes gekoppeld en dienen elk hun eigen doel.
Samen vormen componenten (knoppen, navigatiebalken, afbeeldingen) het programma als geheel. React Native is een component-gedreven framework.
Voorbeeldantwoord:
Props geven eigenschappen aan componenten die in een programma worden ingevoegd, waardoor componenten aanpasbaar zijn. Hetzelfde component kan bijvoorbeeld in verschillende delen van een app worden gebruikt. Wanneer we props gebruiken, kunnen we het uiterlijk of het gedrag van het component wijzigen.
Voorbeeldantwoord:
AsyncStorage is React Native's key-value, ongecodeerde opslagmodule waarmee ontwikkelaars gegevens kunnen opslaan voor offline gebruik. Meestal wordt het gebruikt om gegevens op te slaan wanneer een app niet is gekoppeld aan een cloudservice, of wanneer specifieke functies gegevensopslag vereisen.
Voorbeeldantwoord:
In React Native-apps wordt Flexbox gebruikt om een consistente lay-out te bieden voor verschillende schermtypen. Het Flexbox-algoritme helpt bij het structureren van de positionering van verschillende componenten en het creeren van een responsieve UI voor de eindgebruiker.
Voorbeeldantwoord:
In React Native verwijst de state naar informatie over een eigenschap op een bepaald moment. In tegenstelling tot props is de status muteerbaar; hij kan veranderen. Dit gebeurt meestal wanneer een gebruiker interactie heeft met het component.
Als uw app bijvoorbeeld een invulformulier heeft dat gebruikers moeten invullen, verandert de status van dat component wanneer de gebruiker iets intypt.
Voorbeeldantwoord:
In React Native kunt u componenten vanaf nul importeren, maar u kunt ook kant-en-klare componenten importeren vanuit een ander bestand.
Om een component te importeren, typt u <import { Component } from 'react-native'>, waarbij u het woord tussen haakjes verandert afhankelijk van het type component dat u wilt importeren.
Voorbeeldantwoord:
Hoewel React Native over het algemeen wordt gebruikt met JavaScript, is compatibiliteit met andere codetalen, waaronder Python, C++ en C, ook mogelijk via de Java Native Interface (JNI) van het framework.
Voorbeeldantwoord:
In React Native draait JavaScript-code via twee engines:
JavaScriptCore wordt gebruikt op iOS-simulators en Android-emulators; vrijwel alle bewerkingen lopen via deze engine
V8 wordt gebruikt wanneer Chrome debugging uitvoert
U kunt deze intermediare React Native sollicitatievragen gebruiken voor mid-level React Native developer rollen, waarbij de kandidaat al een paar jaar ervaring heeft.
Voorbeeldantwoord:
Zoals elk softwareframework heeft ook React Native zijn deel nadelen. Deze omvatten:
Niet-nativiteit: React Native is geen native oplossing, wat betekent dat de apps iets langzamer kunnen zijn dan native apps
Debuggingproblemen: React Native is gebouwd met Javascript, Objective-C, Java en C of C ++, wat debuggen moeilijker kan maken
Geheugenbeheer: Beperkingen op het geheugen betekenen dat React Native niet geschikt is voor het ontwikkelen van rekenintensieve apps
Lage beveiliging: Het open-source ontwerp van React Native stelt apps meer bloot aan bedreigingen, wat vooral gevaarlijk is voor apps die gevoelige informatie bevatten, zoals bankdiensten
Leercurve: React Native is een van de meer uitdagende softwareframeworks om te leren, vooral voor junior ontwikkelaars
Voorbeeldantwoord:
Enkele van de meest voorkomende prestatieproblemen in React Native zijn:
Hoog CPU-gebruik: Het offloaden van complexe functies naar de JavaScript thread kan prestatieproblemen veroorzaken
Geheugenlek: Informatie kan verloren gaan in de Bridge tijdens de overdracht van de Primary naar de React Native domeinen, vooral in Android apps
Trage navigatie: Meerdere thread bridging kan ook leiden tot tragere navigatietijden
Voorbeeldantwoord:
Er zijn verschillende technieken die we kunnen gebruiken om de prestaties van een app in React Native te optimaliseren, zoals:
Alle console statements verwijderen
Afbeeldingen verkleinen en schalen
Afbeeldingen intern opslaan
Ruwe gegevens comprimeren of converteren JSON-gegevens
Gebruik codesplitsing voor grote lijsten
Animaties plannen
Onnodige bibliotheken en functies verwijderen
Voorbeeldantwoord:
Het proces voor het renderen van code in React Native is als volgt:
Wanneer de app wordt geopend, begint de hoofddraad (of UI thread) met de uitvoering door JavaScript-bundels te laden
Zodra de JavaScript-code met succes is geladen, stuurt de hoofddraad deze naar de tweede JS thread waar meer berekeningen worden uitgevoerd
Wanneer React Native begint met renderen, genereert het verzoeningsalgoritme een virtuele DOM of lay-out, die vervolgens naar een derde schaduwthread wordt gestuurd
De schaduwthread berekent een nieuwe DOM en stuurt de lay-outkenmerken naar de hoofdthread UI
De UI-hread rendert vervolgens de ontvangen DOM voor weergave op de mobiele app
Voorbeeldantwoord:
De bridge fungeert als transportlaag tussen JavaScript en Native modules. In het renderproces:
De bridge ontvangt eerst de gebruikersreactie om de app te openen van de Native-module
Vervolgens geeft het de geserialiseerde payload door aan de JavaScript-module
Zodra de gebeurtenis is verwerkt en een virtuele DOM is gegenereerd in de JavaScript-module, ontvangt de bridge het geserialiseerde gebatchte antwoord
De bridge geeft het geserialiseerde gebatchte antwoord door aan de Native-module voor de uiteindelijke rendering
Voorbeeldantwoord:
In React Native wordt de interactiemanager gebruikt om de uitvoering van een functie uit te stellen totdat een gespecificeerde 'interactie' is voltooid.
Dit is belangrijk omdat React Native single-threaded is, wat betekent dat animaties op de UI in de wachtrij overbelast kunnen raken. De interactiemanager helpt bij dit probleem en zorgt ervoor dat animaties soepel verlopen op een geplande manier.
Voorbeeldantwoord:
Fabric is een modern type architectuur dat voor het eerst werd gemaakt in 2018 en is bedoeld om enkele prestatieproblemen van React Native aan te pakken. Fabric moderniseert de renderlaag van het framework door het mogelijk te maken dat gespecificeerde prioritaire taken synchroon en dus sneller worden uitgevoerd.
Voorbeeldantwoord:
In React Native kunnen we op twee manieren debuggen:
Debuggen op afstand
Voor iOS opent u het menu en selecteert u 'Debug op afstand'
Voor Android, opent u het menu en selecteert u 'Debuggen op afstand'
De knop 'Debuggen op afstand' start het hulpprogramma Debugger van Chrome Developer Tools
In-app debuggen
Voor iOS, voer de opdracht uit
Voer voor Android de opdracht uit
Deze opdrachten starten de tools voor in-app debugging in het betreffende besturingssysteem
Voorbeeldantwoord:
Het invoegen van basistekst in React Native apps wordt afgehandeld door de componenten Text en TextInput. Met TextInput kunnen gebruikers typen in de app. We kunnen dit implementeren met de volgende syntaxis: <import { Text, TextInput, View } from 'react-native'>.
Voorbeeldantwoord:
Er zijn verschillende handige trucs om de prestaties van afbeeldingen in React Native te optimaliseren. Deze omvatten:
Tools voor het cachen van afbeeldingen gebruiken
PNG- of WEBP-indelingen gebruiken in plaats van JPEG
Kleinere afbeeldingen gebruiken
Het aantal renders verminderen
Voorbeeldantwoord:
In React Native kunnen ontwikkelaars met timers de volgorde manipuleren waarin gebeurtenissen in een programma plaatsvinden. Er zijn vier verschillende soorten timers, die elk een ander doel dienen:
Timeout implementeert een vertraging
Interval laat herhaalde acties toe op bepaalde intervallen
Onmiddellijk laat acties toe zo snel mogelijk plaatsvinden
Animatie laat animaties zien wanneer het programma klaar is om frames te renderen
Voorbeeldantwoord:
Met hooks kunnen ontwikkelaars 'inhaken' op bestaande componenten en toegang krijgen tot hun state en lifestyle-functies. Voorheen waren deze niet toegankelijk voor gebruik elders. Met hooks kunnen ontwikkelaars nu gebruikmaken van de state- en lifestyle-eigenschappen van een component zonder een nieuwe class te hoeven schrijven.
Voorbeeldantwoord:
We kunnen basisknoppen maken met de volgende syntaxis: <import { View, Button, StyleSheet } from "react-native">. Basisknoppen ondersteunen een minimaal aanpassingsniveau en kunnen worden aangepast met TouchableOpacity of TouchableWithoutFeedback.
Voorbeeldantwoord:
Met snel verversen kunnen ontwikkelaars bijna onmiddellijk feedback krijgen over recente wijzigingen in hun app. Zodra 'Snel verversen inschakelen' in het ontwikkelaarsmenu is ingeschakeld, worden alle nieuwe bewerkingen in het programma binnen enkele seconden zichtbaar voor een eenvoudige evaluatie.
U kunt de onderstaande geavanceerde sollicitatievragen gebruiken bij het aannemen van een senior React Native-ontwikkelaar met meerdere jaren ervaring.
Voorbeeldantwoord:
De meeste React Native-gegevens worden opgeslagen in Async Storage. Omdat dit een niet-versleutelde, lokale vorm van opslag is, is het niet geschikt voor het opslaan van gevoelige gegevens zoals tokens en wachtwoorden.
Als alternatief biedt React Native Keychain een veilige vorm van opslag die ook op dezelfde manier werkt als Async Storage. Voor iOS kan Keychain-opslag worden gebruikt om gevoelige gegevens te beschermen, terwijl Android-ontwikkelaars Facebook Conceal en Android Keystone kunnen gebruiken.
Voorbeeldantwoord:
Wanneer prestatieproblemen optreden, zijn er verschillende oplossingen beschikbaar voor ontwikkelaars. Hier zijn bijvoorbeeld enkele oplossingen voor enkele veelvoorkomende prestatieproblemen:
Hoog CPU-gebruik: Apps optimaliseren door gegevens te comprimeren, verspillende renders te verwijderen en cacheopslag te gebruiken zal de prestatiesnelheid verbeteren
Geheugenlek: Geheugenlekken kunnen worden voorkomen door te debuggen, het gebruik van console statements te vermijden en code regelmatig te controleren op inconsistenties
Trage navigatie: et gebruik van React Navigation in plaats van andere navigatietools zoals Navigator of NavigationExperimental zal navigatieproblemen helpen verzachten
Voorbeeldantwoord:
Ongeveer 85% van de React Native-code is cross-platform, wat betekent dat de meeste processen hetzelfde zijn op zowel iOS als Android. Er zijn echter een paar kleine verschillen. Deze zijn onder andere:
iOS-ontwikkeling maakt gebruik van Mac en Xcode, terwijl Android-ontwikkeling gebruik maakt van Android SDK en een emulator
Plugins van derden die geen native functionaliteit bieden, moeten anders worden gebruikt
Het overbruggingsproces kan enigszins anders zijn bij de ontwikkeling van complexe apps
Voorbeeldantwoord:
Er kunnen verschillende stappen worden genomen om animaties in React Native te optimaliseren. Deze omvatten:
Gebruik lazy loading zodat componenten alleen worden gerenderd als ze in gebruik zijn
Verwijder geanimeerde waarden uit de state om onnodige overhead te voorkomen
Gebruik shouldComponentUpdate om het renderproces te versnellen
Gebruik useNativeDriver voor Android om al het animatiewerk over te brengen naar de native laag
Voorbeeldantwoord:
Gebruik een foutrapportage-integratie van derden om een foutenrapport op te halen en de bug verder te diagnosticeren. Deze plugins helpen bij het verzamelen, organiseren en analyseren van crashrapporten en bieden ook snelle oplossingen zodat de app weer aan de slag kan. Populaire foutrapportageplugins zijn:
Bugsnag
Crashlytics
Sentry
TestFairy
Rollbar
Voorbeeldantwoord:
Redux is een handig hulpmiddel voor toestandsbeheer. Het kan worden geimplementeerd door de volgende stappen te volgen:
Installeer de benodigde Redux-pakketten online
Maak een Redux-map aan de root van de app
Voeg binnen de Redux-map drie bestanden toe: actions.js, reducer.js en store.js
Importeer in het nieuwe reducer.js bestand van 'redux'
Importeer in het store.js bestand van 'redux' om de store te maken
Importeer de store naar de React Native app
Voorbeeldantwoord:
In React Native is TouchableOpacity een wrapper die wordt gebruikt om de transparantie van een knop te wijzigen. Bij gebruik op een knop vermindert de ondoorzichtigheid in reactie op aanraking, zodat gebruikers de achtergrond kunnen zien wanneer ze op de knop drukken.
Voorbeeldantwoord:
Flexbox werkt in React Native over het algemeen op dezelfde manier als in CSS op het web. Er zijn echter een paar kleine verschillen in de waarden. Deze zijn onder andere:
De standaardwaarde in React Native is kolom, terwijl de standaardwaarde voor CSS rij is
De standaardwaarde in React Native is flex-start, terwijl de standaardwaarde voor CSS stretch is
De standaardwaarde in React Native is 0, terwijl de standaardwaarde voor CSS 1 is
Voorbeeldantwoord:
Een geheugenlek treedt op wanneer geheugen dat niet langer nodig is voor een app in de app blijft in plaats van te worden teruggegeven aan het besturingssysteem. Dit is een van de meest voorkomende oorzaken van prestatieproblemen.
In theorie wordt geheugenbeheer automatisch afgehandeld door de garbage collector. Dit proces is echter nog steeds gevoelig voor fouten. Debug-gereedschappen kunnen worden gebruikt om geheugenlekproblemen te identificeren. Enkele van de meest voorkomende oorzaken van problemen zijn:
Timers en luisteraars in componentDidMount
Inline stijlen
Closure scope leaks
Het gebruik van console.log
Debuggen kan de oorzaak van het geheugenlek identificeren; zodra deze is verwijderd, zou het probleem moeten zijn opgelost.
Voorbeeldantwoord:
Er zijn verschillende technieken om de prestaties van FlatList items te optimaliseren. We kunnen bijvoorbeeld:
Vermijd het gebruik van 1080P HD-afbeeldingen
Optimaliseer de maxToRenderPerBatch prop
Gebruik de getItemLayout prop
Gebruik de keyExtractor prop
Gebruik minder weergaven
Optimaliseer de windowSize prop
Voorbeeldantwoord:
Live reloading in React Native vernieuwt de hele app wanneer een bestand wordt gewijzigd, terwijl hot reloading alleen de bestanden vernieuwt die zijn gewijzigd.
Wanneer hot reloading wordt gebruikt in een app, blijft de status hetzelfde en keert de ontwikkelaar terug naar de pagina waarop hij is begonnen. Het tegenovergestelde geldt voor live reloading.
Voorbeeldantwoord:
ScrollView laadt alle gegevensitems op een scherm om te kunnen scrollen. Alle gegevens worden opgeslagen in RAM, wat prestatieproblemen kan veroorzaken bij grote hoeveelheden gegevens.
FlatList geeft alleen de items weer die op dat moment op het scherm worden getoond (standaard 10), waardoor prestatieproblemen worden omzeild.
Het is daarom het beste om FlatList te gebruiken voor grote datasets, terwijl ScrollView kan worden gebruikt voor kleinere datasets.
Voorbeeldantwoord:
Vectoren zijn een integraal onderdeel van app-ontwerp in React Native. Ze kunnen in eerste instantie worden geinstalleerd door het volgende commando uit te voeren: . Geselecteerde vectorpictogrammen kunnen vervolgens worden geimporteerd in de React Native app voor gebruik.
Voorbeeldantwoord:
In React Native wordt setNativeProps gebruikt om een component rechtstreeks op een DOM-node te wijzigen in plaats van in de status van de app. Hoewel dit kan helpen om problemen op te lossen, maakt het de code ook moeilijker om in de toekomst mee te werken.
Het wordt beschouwd als een back-upoplossing voor prestatieproblemen die verband houden met animaties, en moet alleen worden gebruikt als setState en shouldComponent het probleem niet oplossen.
Het voeren van een effectief sollicitatiegesprek is een belangrijke stap bij het aannemen van een nieuwe app-ontwikkelaar—maar verschillende andere fasen moeten daaraan voorafgaan. De technische aard van React Native betekent dat het essentieel is om eerst de vaardigheid van de kandidaat te testen.
U kunt bijvoorbeeld een React Native tijdgebonden taak maken die kandidaten moeten voltooien, zoals het identificeren van problemen met een voorbeeld van code. Pas de taak waar mogelijk aan uw bedrijfsbehoeften aan.
U kunt ook TestGorilla's React Native test gebruiken om snel de vaardigheden en kennis van kandidaten te evalueren en een shortlist te maken van de beste kandidaten, die u vervolgens kunt uitnodigen voor een gesprek. Hierdoor kunt u de screeningfase vereenvoudigen en optimaliseren, en kunt u de expertise van een kandidaat beoordelen, zelfs als u zelf geen coderingskennis hebt.
Door vroeg in het selectieproces een vaardigheidsbeoordeling uit te voeren, kunt u de meest bekwame kandidaten identificeren. U kunt dan meer tijd besteden aan de sollicitanten op de shortlist: in plaats van tientallen sollicitatiegesprekken en codeerbeoordelingen te houden, kunt u zich concentreren op een select aantal sollicitanten.
Zo kunt u met vertrouwen de ervaring van sollicitanten vergelijken met uw bedrijfsbehoeften om te bepalen of ze bij u passen.
Door de bovenstaande sollicitatievragen te gebruiken in combinatie met vaardigheidsbeoordelingen, kunt u de beste kandidaten voor uw bedrijf identificeren. Met de juiste React Native ontwikkelaar in uw team kunt u concurreren in de voortdurend evoluerende en uiterst lucratieve markt voor mobiele apps, die nu naar schatting een waarde heeft van 700 miljard dollar.
Denk eraan uw vragen aan te passen aan het juiste ervaringsniveau en aan uw zakelijke vereisten. Het selectieproces gaat niet over het vinden van de beste allround React Native ontwikkelaar, maar degene die de juiste match is voor de behoeften van uw bedrijf.
TestGorilla’s React Native test kan u helpen snel en onbevooroordeeld de beste React Native ontwikkelaars te vinden. Ga vandaag nog gratis aan de slag en begin met het nemen van betere aannamebeslissingen.
Maak binnen enkele minuten assessments voor pre-employment om kandidaten te screenen, bespaar tijd en werf toptalent.
Geen spam. Afmelden op elk gewenst moment.
Onze screeningstesten identificeren de beste kandidaten en maken je wervingsbeslissingen sneller, gemakkelijker en zonder vooringenomenheid.