Top 50 must-know React Interview Vragen en antwoorden

Op naar een React-ontwikkelaarsinterview en benieuwd wat de vragen zouden kunnen zijn? Hier is een lijst van de top 50 vragen en hun antwoorden.

ReactJS-ontwikkelaars zijn zeer gewild en daar is een goede reden voor. Maar je zult je vaardigheid in het kader moeten bewijzen om de baan te krijgen.

Hieronder volgen veelgestelde vragen over React-ontwikkeling en hun antwoorden waarvan u op de hoogte moet zijn. Het omvat alles, van de basis tot meer geavanceerde onderwerpen.

Inhoudsopgave

1. Wat is Reageren?

React is een gratis en open-source JavaScript-bibliotheek voor de ontwikkeling van gebruikersinterfaces, die componenten gebruikt om uitvoer te creëren voor toepassingen met één pagina. React is ontwikkeld door Facebook (Meta) en wordt onderhouden door een ontwikkelaarsgemeenschap.

2. Maak een lijst van de belangrijke functies van React

De belangrijkste kenmerken van React zijn:

  1. Gebruiksgemak
  2. Snelle ontwikkeling
  3. Het gebruik van componenten
  4. JSX
  5. De virtuele DOM
  6. Hoge prestaties
  7. Gegevensbinding in één richting

3. Waar is de projectrepository van React?

React is een mono-repository die leeft op https://github.com/facebook/react. Omdat het een mono-repository is, betekent dit dat al zijn code en andere bronnen op dezelfde plaats worden opgeslagen voor eenvoudiger ontwikkeling en beheer.

4. Wat is de huidige stabiele versie van React?

De meest recente stabiele versie van React van 14 juni 2022 is 18.2.0.

5. Noem de verschillen tussen React Native en ReactJS

React en ReactJS zijn hetzelfde, terwijl React Native is gebouwd op React. Vanwege hun verschillen wordt React gebruikt bij het maken van dynamische en responsieve gebruikersinterfaces voor webapplicaties, terwijl React Native is ontworpen voor het bouwen van applicaties als mobiele apps.

6. Wat is het verschil tussen een Element en een Component?

Een React-element is een eenvoudig en onveranderlijk object dat is gemaakt om een ​​DOM-knooppunt weer te geven. Onveranderlijk zijn betekent dat het niet kan worden gewijzigd nadat het is gemaakt, zoals het wordt weergegeven in de DOM. Een React-component daarentegen is veranderlijk en produceert JSX-uitvoer zodra deze is weergegeven.

7. Hoe maak je een Component aan?

Er zijn twee manieren om een ​​component in React aan te maken: 1.) Functiecomponenten en 2.) klassecomponenten. Zoals de namen impliceren, wordt een functiecomponent gemaakt met behulp van een functiedeclaratie, terwijl een klassecomponent wordt gemaakt met behulp van een klassendeclaratie.

//function component
function Hello({ message }) {
  return <h1>{`Function hello, ${message}`}</h1>

}
//class component
class Hello extends React.Component {
  render() {
    return <h1>{`Class hello, ${this.props.message}`}</h1>
  }
}

8. Noem de 4 stadia van een React Component

Een React-component doorloopt de volgende 4 fasen in zijn levenscyclus:

  1. Beginstadium – Componentconstructie in de standaardstatus met initiële rekwisieten
  2. Montagefase: – JSX-weergave van de component
  3. Updatefase: – Wijzigingen in de status van componenten en hertekenen van applicaties
  4. Ontkoppelfase – Component verwijderen uit de DOM

9. Leg uit wat een component van een hogere orde betekent

Een component van hogere orde (HOC) is een React-methodologie voor het maken van componenten. Het gebruikt een bestaande component om een ​​nieuwe te maken met extra functionaliteit. Met andere woorden, een HOC is een functie die een component als argument neemt en een nieuwe component met toegevoegde functies teruggeeft.

10. Wat zijn gecontroleerde en ongecontroleerde componenten?

Een gecontroleerde component is een React-component die zijn waarde ontleent aan rekwisieten en het systeem via callbacks op de hoogte stelt van eventuele wijzigingen. Het wordt bestuurd door een bovenliggende component die zijn staat en geeft de waarden als rekwisieten door aan de gecontroleerde component. Een ongecontroleerd onderdeel daarentegen beheert zijn status, en u zult de moeten opvragen ARREST gebruik ref om zijn waarde te krijgen.

11. Wat zijn rekwisieten in React?

Props in React is gewoon een simpele manier om eigenschappen te zeggen, en daarmee doel je op de eigenschappen van een component. Props worden gebruikt om gegevens van een bovenliggende component door te geven aan een of meer onderliggende componenten, en ze zijn alleen-lezen naar de onderliggende component.

12. Wat zijn rekwisieten.kinderen?

Het kenmerk Props.children bevat informatie over alle inhoud van een component met een openings- en een sluittag. Deze onderliggende elementen verwijzen naar alle elementen die in de huidige component zijn gedefinieerd en kunnen één, veel of geen zijn.

13. Kun je rekwisieten updaten in React?

Nee, rekwisieten in React zijn top-down en onveranderlijk. Dit betekent dat een component alle gewenste eigenschappen naar zijn kinderen kan sturen, maar zijn rekwisieten niet kan bijwerken. Alleen de ouder kan zijn rekwisieten bijwerken.

14. Wat is JSX?

JSX staat voor JavaScript-XML. Het is een JavaScript-syntaxisextensie die het mogelijk maakt om HTML in reactiecode te schrijven. De browser begrijpt JSX sowieso niet, dus React moet het omzetten in leesbare HTML-code.

15. Wat is het verschil tussen een component en een element?

Een element is een staatloze en onveranderlijke definitie van een virtueel DOM-knooppunt. Het bevat zowel een type als een eigenschap, maar geen methoden zoals een component heeft. Dit gebrek aan methoden maakt het snel.

16. Wat is een staat in React?

Een status in React verwijst naar een ingebouwd object in een component dat wordt gebruikt om informatie over die component vast te houden en te beheren. Een toestand kan in de loop van de tijd veranderen en zal dus een re-rendering van die component veroorzaken. U moet de toestand definiëren in de constructormethode van het onderdeel, anders wordt het onderdeel toestandloos.

17. Wat is een staatloze Component?

Een stateless React-component heeft geen state. Dit betekent dat u de status niet kunt instellen met deze.setState() methode en heeft het ook niet weergegeven. Een stateless component kan wel rekwisieten hebben.

18. Hoe update je een status in React

U werkt de status van een component bij door zijn . aan te roepen deze.setState() methode.

19. Leg de strikte modus van React uit

De strikte modus van React is een hulpmiddel dat de ontwikkelaar helpt potentiële problemen in de toepassing te ontdekken door diepere controles op componenten te activeren en meer waarschuwingen te markeren. De strikte modus is alleen beschikbaar in de ontwikkelingsmodus.

20. Wat betekent het opheffen van de staat in reactie?

Het betekent dat onderliggende componenten een gemeenschappelijke status van hun ouder moeten delen, omdat dit dingen gemakkelijker te beheren maakt dan voor elke onderliggende component om de gemeenschappelijke status afzonderlijk te beheren.

21. Hoe geef je gegevens door in React?

Je geeft gegevens door in React met behulp van rekwisieten en callbacks. De rekwisieten van React zijn unidirectioneel, waardoor eigenschappen alleen van bovenliggende componenten naar hun kinderen kunnen worden doorgegeven. Om gegevens van een onderliggende component naar een bovenliggende component door te geven, moet u een callback-functie gebruiken.

22. Bepaal Stroom in Reageren

Flux is een unidirectioneel concept om de datastroom in een applicatie te sturen. Unidirectioneel zijn betekent dat gegevens alleen van bovenliggende naar onderliggende componenten kunnen worden doorgegeven. Flux kan ook meerdere datastores per app bevatten.

23. Bepaal Redux in Reageren

Redux is een handige open-source JavaScript-bibliotheek voor het beheren van complexe toestanden in een toepassing. Het is onafhankelijk en kan worden gebruikt in andere frameworks zoals Angular. In tegenstelling tot Flux centraliseert Redux het statusbeheer van een applicatie, waardoor het eenvoudiger wordt om complexe UI's te bouwen.

24. Wanneer moet u Redux gebruiken?

Niet alle apps hebben Redux nodig. Maar het is nuttig in de volgende omstandigheden:

  1. Wanneer je grote hoeveelheden applicatiestatussen in je app hebt
  2. Wanneer de logica van uw app complex is
  3. Wanneer uw app een grote codebase heeft
  4. Wanneer u de app regelmatig moet bijwerken
  5. Als er veel mensen aan de app werken

25. Wat is het grootste verschil tussen Redux en Flux?

Het grote verschil tussen de twee is dat Redux alle applicatiegegevens vanuit één winkel beheert, terwijl je onder Flux meerdere winkels kunt hebben.

26. Maak een lijst van de componenten van Redux

Er zijn 4 belangrijke onderdelen van Redux:

  1. Shop – Hier slaat u de applicatiestatus op.
  2. Actie – Dit zijn gebeurtenissen die ervoor zorgen dat de app gegevens naar de Redux-winkel stuurt.
  3. reducer - Dit is een functie die de huidige app-status en een actie als argumenten accepteert en vervolgens een nieuwe status als resultaat retourneert.
  4. Middleware - Met deze functie kan een ontwikkelaar alle acties van een component vastleggen voordat ze de reductiefunctie bereiken.

27. Wat zijn React Hooks?

React hooks zijn een kenmerk van functiecomponenten die u toegang geven tot verschillende React-functies, zoals statusgegevens en rendering-updates. Het werd geïntroduceerd in React 16.8.

28. Noem het type haken in React

Er zijn 15+ hooks in React, beginnend bij de basis hooks zoals useState, useEffect en useContext tot extra hooks zoals useCallback, useReducer, useMemo, useRef, enzovoort.

29. Wat zijn fragmenten?

Een React-fragment is een handige manier om meerdere onderliggende elementen in een component te groeperen, zonder ze aan het DOM toe te voegen. U definieert eenvoudig de tag met:

<>

or

en laad alle onderliggende elementen die je erin wilt hebben. Het enige verschil is dat de verkorte versie <> geen sleutels en attributen accepteert, terwijl de lange versie dat wel doet.

30. Maak een lijst van de belangrijkste methoden van het react-dom-pakket

Dit zijn de createPortal() voor het renderen van kinderen in een externe DOM en de flushSync() voor het doorspoelen van updates. Er zijn ook de methoden render() en hydrate() die sinds React 18 zijn vervangen door createRoot() en hydrateRoot().

31. Wat zijn React Keys?

Sleutels zijn unieke id's die het best kunnen worden gebruikt om lijsten te beheren. Sleutels maken het gemakkelijk om de afzonderlijke items in een lijst te identificeren en om te weten wanneer elk item is bijgewerkt, verwijderd of op welke manier dan ook gewijzigd.

32. Waarom zijn React Keys belangrijk?

Sleutels zijn belangrijk in React omdat het helpt bij het efficiënt weergeven van de echte DOM. React is goed omdat het probeert te minimaliseren welke componenten het opnieuw rendert na een gebeurtenis, en het gebruik van sleutels op een lijst voorkomt dat React hele lijsten opnieuw moet renderen, wat een probleem kan zijn met grote lijsten.

33. Wat is een gebeurtenis in React?

Een gebeurtenis is elke actie in een app die afkomstig is van de gebruiker of het systeem. Een gebeurtenis kan variëren van een muisklik of tik op mobiele apparaten tot het formaat wijzigen van een venster, het indrukken van een toets, slepen, focussen, enzovoort.

34. Leg uit wat Synthetische gebeurtenis Middelen

Een synthetische gebeurtenis is een wrapper rond de native gebeurtenissen van een browser, met als probleem dat verschillende browsers hun gebeurtenissen een andere naam geven. React maakt gebruik van synthetische gebeurtenissen om te voorkomen dat er meerdere implementaties en methoden moeten worden gemaakt voor alle verschillende browsers die er zijn. Op deze manier behoudt React gemeenschappelijke namen voor alle verschillende browsergebeurtenissen als een uniforme API.

35. Wat is Webpack?

Webpack is een modulebundelsysteem dat wordt gebruikt om JavaScript- en CSS-bestanden te combineren en te verkleinen. Het is gebouwd op Node.js en is handig bij het werken met een groot aantal bestanden of niet-code-items zoals afbeeldingen en lettertypen.

36. Wat is de create-react-app?

Create-react-app is een tool die je helpt om een ​​React-applicatie van één pagina te maken in je Node.js-omgeving. Het genereert alle bestanden en mappen die je nodig hebt om een ​​basis-app te starten en je neemt het vanaf daar. Het vereist Node-versie 14.0.0 en hoger en npm vanaf ver. 5.6.

Gebruik is eenvoudig:

npx create-react-app mijnNieuweApp

cd mijnNieuweApp

npm start

37. Kun je de serverkant renderen met React?

Ja, dat kan, hoewel het voor grote projecten arbeidsintensief kan zijn. Server-side rendering is handig omdat het de gebruikerservaring en SEO verbetert. Je hebt een Node.js-omgeving nodig, een bundel zoals Webpack en een framework zoals Next.js en Remix om React-apps tijdens runtime weer te geven. Een oplossing voor het intensieve gebruik van bronnen is het gebruik van een statische sitegenerator, zoals de op Next.js gebaseerde Gatsby.

38. Leg uit wat een pijlfunctie doet

Een pijlfunctie is gewoon een kortere manier om functies te definiëren. Het is een ES6-steno die vervangt:

= functie() die al met Countr werken ()=>.

Bijvoorbeeld:

test = functie(){

return “Dit is een test”;

}

wordt dan:

testen = () => {

retourneer "Dit is een test";

}

of voor eenregelige uitspraken:

test = () => “Dit is een test”;

39. Wat is een Reageer router?

React-router is een bibliotheek die routeringsfunctionaliteit biedt in een React-app. Het maakt het gemakkelijk om uitgebreide navigatiecomponenten op te nemen en te gebruiken, wat erg handig kan zijn voor grote of complexe projecten.

40. Wat zijn de belangrijkste voordelen van het gebruik van React Router?

Het maakt verschillende URL-paden voor uw app en biedt window.location-waarden en een geschiedenisobject.

41. Wat is ComponentWillUnmount()?

Dit is een componentmethode die wordt aangeroepen wanneer React op het punt staat de component te vernietigen. Het is een leuke plek om dingen op te ruimen, timers te wissen, netwerkverzoeken te annuleren en andere belangrijke de-initialisatieproblemen op te lossen.

42. Wat is De Constructor()?

De constructor is de methode van de component die wordt aangeroepen tijdens de initialisatie van de component. Het wordt meestal gebruikt voor het initialiseren van lokale statussen en voor bindende gebeurtenisafhandelingsmethoden.

43. Wat is virtuele DOM?

De virtuele DOM van React is een lichtgewicht kopie van de DOM van het eigenlijke HTML-document. Het wordt gebruikt voor efficiënt beheer en update van wijzigingen op de echte DOM.

44. Wat zijn de voordelen van virtuele DOM ten opzichte van echte DOM?

De virtuele DOM is lichtgewicht en sneller te renderen dan de echte DOM, en dit maakt het efficiënter om eerst naar de virtuele DOM te renderen en alleen wijzigingen aan te brengen in de echte DOM als dat nodig is. Elk knooppunt op de echte DOM heeft een overeenkomstige component op de virtuele DOM, en zodra er wijzigingen zijn in een virtuele component na het renderen, weet React dan precies welke echte HTML-node moet worden bijgewerkt of verwijderd.

45. Leg de term uit Verzoening in Reageren

Reconciliatie is de methode van React om de echte DOM alleen bij te werken wanneer dat nodig is, door bijgewerkte versies van de virtuele DOM te controleren door middel van verschillen en alleen de exacte knooppunten bij te werken die op de echte DOM zijn gewijzigd.

46. Leg de term uit Profiler in Reageren

Profiler is een React-tool die helpt bij het optimaliseren van een app door te meten hoe vaak een applicatie wordt weergegeven en hoe lang het duurt voordat elk onderdeel wordt weergegeven. Dit helpt de ontwikkelaar om delen van de applicatie te identificeren die mogelijk moeten worden geoptimaliseerd.

47. Leg de term uit Context in Reageren

Context is een methode om gegevens tussen React-componenten op vele niveaus door te geven zonder dat de gegevens door elk nesting-niveau hoeven te gaan met behulp van rekwisieten. Het wordt het best gebruikt voor het eenvoudig delen van gegevens met veel componenten die geen constante updates nodig hebben, zoals thema-informatie en gebruikersgegevens. Het nadeel is dat het hergebruik van componenten kan bemoeilijken.

48. Leg de term uit Montage in Reageren

Monteren in React is het proces van het koppelen van een component als een knoop aan de DOM. Un-mounten is het tegenovergestelde.

49. Leg de term uit Rendering in Reageren

Rendering is het proces van het tekenen van een component. Het komt meestal voor wanneer de status van het onderdeel verandert en React de gebruikersinterface opnieuw moet tekenen. Als een component tijdens het renderen opnieuw wordt getekend, worden de onderliggende componenten ook opnieuw getekend.

50. Leg de term uit Foutgrens in Reageren

Foutgrens verwijst naar een React-component die de JavaScript-fouten van de onderliggende componenten opvangt, de fouten registreert en een fallback-UI weergeeft in plaats van de knooppunten die zijn gecrasht. Foutgrenzen werden geïntroduceerd in React 16.

Conclusie

We zijn aan het einde gekomen van deze lijst van de top 50 must-know React-interviewvragen en hopelijk heb je nu een goed idee van wat je kunt verwachten.

Houd er ook rekening mee dat niets hetzelfde blijft en dat je sollicitatiegesprek alle kanten op kan. Daarom moet je blijven studeren en op de hoogte blijven.

Nnamdi Okeke

Nnamdi Okeke

Nnamdi Okeke is een computerliefhebber die graag een breed scala aan boeken leest. Hij heeft een voorkeur voor Linux boven Windows/Mac en gebruikt al jaren
Ubuntu sinds zijn begindagen. Je kunt hem op twitter vangen via bongotrax

Artikelen: 178

Technische spullen ontvangen

Tech trends, startup trends, reviews, online inkomsten, webtools en marketing een of twee keer per maand

Laat een reactie achter

Uw e-mailadres wordt niet gepubliceerd.