De 50 bästa React-intervjufrågorna och -svaren du måste veta

ReactJS-utvecklare är mycket eftertraktade och det finns en god anledning till det. Men du måste bevisa din skicklighet inom ramen för att få jobbet.

Följande är vanliga frågor om React-utveckling och deras svar som du bör vara medveten om. Den innehåller allt från grunderna till mer avancerade ämnen.

1. Vad är React?

React är ett gratis JavaScript-bibliotek med öppen källkod för utveckling av användargränssnitt, som använder komponenter för att skapa utdata för ensidiga applikationer. React utvecklades av Facebook (Meta) och underhålls av en utvecklargemenskap.

2. Lista de viktiga funktionerna i React

De viktigaste funktionerna i React inkluderar:

1. Användarvänlighet
2. Snabb utveckling
3. Användningen av komponenter
4. JSX
5. Den virtuella DOM
6. Hög prestanda
7. Envägsdatabindning

3. Var finns Reacts projektförråd?

React är ett mono-repository som bor på https://github.com/facebook/react. Att vara ett mono-repository innebär att all dess kod och andra källor lagras på samma plats för enklare utveckling och hantering.

4. Vilken är den nuvarande stabila versionen av React?

Den senaste stabila versionen av React från 14 juni 2022 är 18.2.0.

5. Ange skillnaderna mellan React Native och ReactJS

React och ReactJS är samma, medan React Native är byggt på React. För deras olikheter används React för att skapa dynamiska och responsiva användargränssnitt för webbapplikationer, medan React Native är designad för att bygga applikationer som mobilappar.

6. Vad är skillnaden mellan ett element och en komponent?

Ett React-element är ett enkelt och oföränderligt objekt skapat för att representera en DOM-nod. Att vara oföränderlig betyder att den inte kan ändras när den väl har skapats, eftersom den återges till DOM. En React-komponent, å andra sidan, är föränderlig och producerar JSX-utdata när den har renderats.

7. Hur skapar man en komponent?

Det finns två sätt att skapa en komponent i React: 1.) Funktionskomponenter och 2.) klasskomponenter. Som namnen antyder skapas en funktionskomponent med en funktionsdeklaration, medan en klasskomponent skapas med en klassdeklaration.

//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. Lista de 4 stegen i en reaktionskomponent

En React-komponent genomgår följande fyra stadier i sin livscykel:

1. Första scenen – Komponentkonstruktion i standardtillstånd med initiala rekvisita
2. Monteringsfas – JSX-rendering av komponenten
3. Uppdaterar fas – Ändringar av komponenttillstånd och omritning av applikation
4. Avmonteringsfas – Komponentborttagning från DOM

9. Förklara vad en högre ordningskomponent betyder

En högre ordningskomponent (HOC) är en React-metod för att skapa komponenter. Den använder en befintlig komponent för att skapa en ny med extra funktionalitet. Med andra ord är en HOC en funktion som tar en komponent som ett argument och returnerar en ny komponent med tillagda funktioner.

10. Vad är kontrollerade och okontrollerade komponenter?

En kontrollerad komponent är en React-komponent som tar sitt värde genom rekvisita och meddelar systemet om eventuella ändringar genom callbacks. Den styrs av en överordnad komponent som hanterar dess tillstånd och skickar värdena som rekvisita till den kontrollerade komponenten. En okontrollerad komponent, å andra sidan, hanterar sitt tillstånd, och du måste fråga efter DOM med hjälp av ref för att få dess värde.

11. Vad är rekvisita i React?

Rekvisita i React är bara ett enkelt sätt att säga egenskaper, och med det syftar du på egenskaperna hos en komponent. Rekvisita används för att överföra data från en överordnad komponent till en eller flera underordnade komponenter, och de är skrivskyddade till den underordnade komponenten.

12. Vad är rekvisita.barn?

Attributet Props.children innehåller information om allt innehåll i en komponent som har en öppnings- och en stängningstagg. Dessa underordnade hänvisningar till alla element som är definierade i den aktuella komponenten och kan vara en, många eller ingen.

13. Kan du uppdatera rekvisita i React?

Nej, rekvisita i React är top-down och oföränderliga. Det betyder att en komponent kan skicka alla egenskaper den gillar till sina barn, men den kan inte uppdatera dess rekvisita. Endast dess förälder kan uppdatera dess rekvisita.

14. Vad är JSX?

JSX står för JavaScript XML. Det är ett JavaScript-syntaxtillägg som gör det möjligt att skriva HTML inuti react-kod. Webbläsaren förstår inte JSX hur som helst, så React måste rendera den till läsbar HTML-kod.

15. Vad är skillnaden mellan en komponent och ett element

Ett element är en tillståndslös och oföränderlig definition av en virtuell DOM-nod. Den innehåller både en typ och egenskap, men inga metoder som en komponent har. Denna brist på metoder gör det snabbt.

16. Vad är ett tillstånd i React?

Ett tillstånd i React hänvisar till ett inbyggt objekt i en komponent som används för att hålla och hantera information om den komponenten. Ett tillstånd kan förändras över tid och kommer därmed att utlösa en omrendering av den komponenten. Du måste definiera tillståndet i komponentens konstruktormetod, annars blir komponenten tillståndslös.

17. Vad är en statslös komponent?

En tillståndslös React-komponent har inget tillstånd. Detta innebär att du inte kan ställa in dess tillstånd med this.setState() metod eller har den återgivits. En statslös komponent kan dock ha rekvisita.

18. Hur uppdaterar du ett tillstånd i React

Du uppdaterar en komponents tillstånd genom att anropa dess this.setState() metod.

19. Förklara Reacts strikta läge

Reacts strikta läge är ett verktyg som hjälper utvecklaren att upptäcka potentiella problem i applikationen genom att aktivera djupare kontroller på komponenter och markera fler varningar. Strikt läge är endast tillgängligt i utvecklingsläge.

20. Vad betyder Lifting State Up in React?

Det innebär att låta underordnade komponenter dela ett gemensamt tillstånd från sin förälder, eftersom det gör saker lättare att hantera än för varje underordnad komponent att individuellt hantera det gemensamma tillståndet.

21. Hur skickar du data i React?

Du skickar data i React med hjälp av rekvisita och återuppringningar. Reacts rekvisita är enkelriktade, vilket gör att egenskaper endast kan överföras från överordnade komponenter till sina barn. För att skicka data från en underordnad komponent till en förälder måste du använda en återuppringningsfunktion.

22. Definiera Flux i React

Flux är ett enkelriktat koncept för att styra dataflödet i en applikation. Att vara enkelriktad innebär att data endast kan överföras från överordnade till underordnade komponenter. Flux kan också inkludera flera datalager per app.

23. Definiera Redux i React

Redux är ett användbart JavaScript-bibliotek med öppen källkod för att hantera komplexa tillstånd i en applikation. Den är oberoende och kan användas i andra ramverk som Angular. Till skillnad från Flux centraliserar Redux en applikations tillståndshantering, vilket gör det lättare att bygga komplexa användargränssnitt.

24. När ska du använda Redux?

Alla appar behöver inte Redux. Men det är användbart under följande förhållanden:

1. När du har stora mängder applikationstillstånd i din app
2. När din app logik är komplex
3. När din app har en stor kodbas
4. När du måste uppdatera appen ofta
5. När du har många som jobbar med appen

25. Vad är den stora skillnaden mellan Redux och Flux?

Den stora skillnaden mellan de två är att Redux hanterar all applikationsdata från en enda butik, medan du kan ha flera butiker under Flux.

26. Lista komponenterna i Redux

Det finns fyra huvuddelar av Redux:

1. HITTA BUTIK – Det är här du lagrar applikationstillståndet.
2. Handling – Det här är händelser som gör att appen skickar data till Redux-butiken.
3. Reducer – Det här är en funktion som accepterar det aktuella apptillståndet och en åtgärd som argument och sedan returnerar ett nytt tillstånd som resultat.
4. middle~~POS=TRUNC – Den här funktionen låter en utvecklare fånga alla åtgärder från en komponent innan de når reduceringsfunktionen.

27. Vad är React Hooks?

React-krokar är en funktion hos funktionskomponenter som ger dig tillgång till olika React-funktioner, såsom tillståndsdata och renderingsuppdateringar. Det introducerades i React 16.8.

28. Lista typen av krokar i React

Det finns 15+ hooks i React, från de grundläggande hooks som useState, useEffect och useContext till ytterligare hooks som useCallback, useReducer, useMemo, useRef, och så vidare.

29. Vad är fragment?

Ett React-fragment är ett bekvämt sätt att gruppera flera underordnade element i en komponent, utan att lägga till dem i DOM. Du definierar helt enkelt taggen med:

<>

or

och ladda alla underordnade element du vill ha inuti. Den enda skillnaden är att den korta versionen <> inte accepterar nycklar och attribut, medan den långa versionen gör det.

30. Lista de viktigaste metoderna för react-dom-paketet

De är createPortal() för att rendera barn till en extern DOM och flushSync() för att tömma uppdateringar. Det finns också metoderna render() och hydrate(), som har ersatts av createRoot() och hydrateRoot() sedan React 18.

31. Vad är React Keys?

Nycklar är unika identifierare som bäst används för att hantera listor. Nycklar gör det enkelt att identifiera de enskilda objekten i en lista och att veta när varje objekt har uppdaterats, raderats eller ändrats på något sätt.

32. Varför är React Keys viktiga?

Nycklar är viktiga i React eftersom det hjälper till med effektiv rendering av den verkliga DOM. React är bra eftersom det försöker minimera vilka komponenter det återrenderar efter en händelse, och att använda nycklar på en lista förhindrar att React behöver återrendera hela listor, vilket kan vara ett problem med stora listor.

33. Vad är en Event in React?

En händelse är varje åtgärd i en app som kommer från antingen användaren eller systemet. En händelse kan sträcka sig från ett musklick eller tryck på mobila enheter till att ändra storlek på fönstret, tangenttryckning, dra, fokusera och så vidare.

34. Förklara vad Syntetisk händelse Betyder

En syntetisk händelse är ett omslag runt webbläsarens inbyggda händelser, med problemet att olika webbläsare namnger sina händelser på olika sätt. React använder syntetiska händelser för att undvika problemet med att behöva skapa flera implementeringar och metoder för alla olika webbläsare där ute. På så sätt upprätthåller React gemensamma namn för alla olika webbläsarhändelser som ett enhetligt API.

35. Vad är Webpack?

Webpack är ett modulbuntningssystem som används för att kombinera och minifiera JavaScript- och CSS-filer. Det är byggt på Node.js och är användbart när du arbetar med ett stort antal filer eller icke-kodtillgångar som bilder och typsnitt.

36. Vad är create-react-appen?

Create-react-app är ett verktyg som hjälper dig att skapa en ensidig React-applikation i din Node.js-miljö. Den genererar alla filer och mappar som du behöver för att starta en grundläggande app och du tar den därifrån. Det kräver Node version 14.0.0 uppåt och npm från ver. 5.6.

Användningen är enkel:

npx create-react-app myNewApp

cd myNewApp

npm start

37. Kan du rendera serversidan med React?

Ja, det kan du, även om det kan bli resurskrävande för stora projekt. Rendering på serversidan är användbart eftersom det förbättrar användarupplevelsen och SEO. Du kommer att behöva en Node.js-miljö, en bundler som Webpack och ett ramverk som Next.js och Remix för att rendera React-appar vid körning. En lösning på den intensiva resursanvändningen är att använda en statisk webbplatsgenerator, som den Next.js-baserade Gatsby.

38. Förklara vad en pilfunktion gör

En pilfunktion är helt enkelt ett kortare sätt att definiera funktioner. Det är en ES6-stenografi som ersätter:

= funktion() med ()=>.

Till exempel:

test = function(){

returnera "Detta är ett test";

}

blir då:

test = () => {

returnera "Detta är ett test";

}

eller för enradiga uttalanden:

test = () => "Detta är ett test";

39. Vad är en React router?

React-router är ett bibliotek som tillhandahåller routingfunktionalitet i en React-app. Det gör det enkelt att inkludera och använda rika navigeringskomponenter, vilket kan vara till stor hjälp för stora eller komplexa projekt.

40. Vilka är de största fördelarna med att använda React Router?

Den skapar olika url-sökvägar för din app och tillhandahåller window.location-värden och ett historikobjekt.

41. Vad är ComponentWillUnmount()?

Detta är en komponentmetod som anropas när React är på väg att förstöra komponenten. Det är ett trevligt ställe att rensa upp saker, rensa timers, avbryta nätverksförfrågningar och hantera andra viktiga avinitieringsfrågor.

42. Vad är The Constructor()?

Konstruktorn är komponentens metod som anropas under komponentens initiering. Den används vanligtvis för att initiera lokala tillstånd och för att binda händelsehanterare.

43. Vad är Virtual DOM?

Reacts virtuella DOM är en lätt kopia av det faktiska HTML-dokumentets DOM. Den används för effektiv hantering och uppdatering av ändringar på den verkliga DOM.

44. Vilka är fördelarna med Virtual DOM framför Real DOM?

Den virtuella DOM är lätt och snabbare att rendera än den verkliga DOM, och detta gör det mer effektivt att rendera till den virtuella DOM först och bara göra ändringar i den verkliga DOM när det finns ett behov. Varje nod på den verkliga DOM har en motsvarande komponent på den virtuella DOM, och när det väl finns ändringar i en virtuell komponent efter rendering vet React exakt vilken riktig HTML-nod som ska uppdateras eller raderas.

45. Förklara termen Försoning i React

Avstämning är Reacts metod för att uppdatera den verkliga DOM endast när det behövs, genom att kontrollera uppdaterade versioner av den virtuella DOM genom att diffa och endast uppdatera de exakta noderna som ändrades på den verkliga DOM.

46. Förklara termen Profiler i React

Profiler är ett React-verktyg som hjälper till att optimera en app genom att mäta hur många gånger en applikation renderar och hur lång tid det tar för varje komponent att rendera. Detta hjälper utvecklaren att identifiera delar av applikationen som kan behöva optimeras.

47. Förklara termen Sammanhang i React

Kontext är en metod för att skicka data mellan React-komponenter på många nivåer utan att behöva skicka data genom varje kapslingsnivå med hjälp av rekvisita. Den används bäst för enkel datadelning med många komponenter som inte behöver ständiga uppdateringar, såsom temainformation och användardata. Dess nackdel är att det kan försvåra återanvändning av komponenter.

48. Förklara termen Montering i React

Montering i React är processen att fästa en komponent som en nod till DOM. Avmontering är motsatsen.

49. Förklara termen rendering i React

Rendering är processen att rita en komponent. Det inträffar vanligtvis när komponentens tillstånd ändras och React måste rita om UI. Om en komponent ritas om under renderingen, ritas dess underordnade komponenter också om.

50. Förklara termen Felgräns i React

Felgräns hänvisar till en React-komponent som fångar JavaScript-felen från dess underordnade komponenter, loggar felen och visar ett reservgränssnitt i stället för noderna som kraschade. Felgränser infördes i React 16.

Slutsats

Vi har nått slutet av den här listan över de 50 bästa React-intervjufrågorna som du måste veta och du bör förhoppningsvis ha en bra uppfattning om vad du kan förvänta dig vid det här laget.

Du bör också notera att ingenting förblir sig likt och din intervju kan ta vilken riktning som helst. Därför bör du fortsätta studera och hålla dig uppdaterad.