Top 50 must-know React Interview spørgsmål og svar

ReactJS-udviklere er meget eftertragtede, og det er der en god grund til. Men du skal bevise din dygtighed inden for rammerne for at få jobbet.

Følgende er ofte stillede React-udviklingsspørgsmål og deres svar, som du bør være opmærksom på. Det inkluderer alt fra det grundlæggende til mere avancerede emner.

1. Hvad er React?

React er et gratis og open source JavaScript-bibliotek til udvikling af brugergrænseflader, som bruger komponenter til at skabe output til enkeltsidede applikationer. React er udviklet af Facebook (Meta) og vedligeholdes af et udviklerfællesskab.

2. List de vigtige funktioner i React

De vigtigste funktioner i React inkluderer:

1. Brugervenlighed
2. Hurtig udvikling
3. Brugen af ​​komponenter
4. jsx
5. Det virtuelle DOM
6. Høj ydeevne
7. Envejs databinding

3. Hvor er Reacts projektlager?

React er et mono-depot, der bor på https://github.com/facebook/react. At være et mono-lager betyder, at al dens kode og andre kilder er gemt på samme sted for lettere udvikling og styring.

4. Hvad er den nuværende stabile version af React?

Den mest aktuelle stabile version af React fra 14. juni 2022 er 18.2.0.

5. Angiv forskellene mellem React Native og ReactJS

React og ReactJS er de samme, mens React Native er bygget på React. For deres forskelle bruges React til at skabe dynamiske og responsive brugergrænseflader til webapplikationer, mens React Native er designet til at bygge applikationer som mobile apps.

6. Hvad er forskellen mellem et element og en komponent?

Et React-element er et simpelt og uforanderligt objekt skabt til at repræsentere en DOM-node. At være uforanderlig betyder, at den ikke kan ændres, når den først er blevet oprettet, som den gengiver til DOM. En React-komponent er på den anden side mutbar og producerer JSX-output, når den er gengivet.

7. Hvordan opretter du en komponent?

Der er to måder at oprette en komponent i React: 1.) Funktionskomponenter og 2.) klassekomponenter. Som navnene antyder, oprettes en funktionskomponent ved hjælp af en funktionserklæring, mens en klassekomponent oprettes ved hjælp af en klasseerklæring.

//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. List de 4 stadier af en React-komponent

En React-komponent gennemgår følgende 4 faser i sin livscyklus:

1. Indledende fase – Komponentkonstruktion i standardtilstand med indledende rekvisitter
2. Monteringsfase – JSX-gengivelse af komponenten
3. Opdatering af fase – Ændringer i komponenttilstand og gentegning af applikation
4. Afmonteringsfase – Fjernelse af komponenter fra DOM

9. Forklar, hvad en højere-ordens komponent betyder

En højere-ordens komponent (HOC) er en React-metode til at skabe komponenter. Den bruger en eksisterende komponent til at skabe en ny med ekstra funktionalitet. Med andre ord er en HOC en funktion, der tager en komponent som et argument og returnerer en ny komponent med tilføjede funktioner.

10. Hvad er kontrollerede og ukontrollerede komponenter?

En kontrolleret komponent er en React-komponent, der tager sin værdi gennem rekvisitter og giver systemet besked om eventuelle ændringer gennem tilbagekald. Den styres af en overordnet komponent, der styrer dens tilstand og sender værdierne som rekvisitter til den kontrollerede komponent. En ukontrolleret komponent styrer på den anden side sin tilstand, og du bliver nødt til at forespørge på DOM ved brug af ref for at få dens værdi.

11. Hvad er Props in React?

Rekvisitter i React er blot en simpel måde at sige egenskaber på, og med det refererer du til en komponents egenskaber. Rekvisitter bruges til at overføre data fra en overordnet komponent til en eller flere underordnede komponenter, og de er skrivebeskyttet til den underordnede komponent.

12. Hvad er rekvisitter.børn?

Props.children-attributten indeholder information om alt indholdet af en komponent, der har et åbnings- og et lukkemærke. Disse børn refererer til alle elementer, der er defineret inde i den aktuelle komponent, og kan være én, mange eller ingen.

13. Kan du opdatere rekvisitter i React?

Nej, rekvisitter i React er top-down og uforanderlige. Det betyder, at en komponent kan sende alle egenskaber, den kan lide, til sine børn, men den kan ikke opdatere sine rekvisitter. Kun dens forælder kan opdatere dens rekvisitter.

14. Hvad er JSX?

JSX står for JavaScript XML. Det er en JavaScript-syntaksudvidelse, der gør det muligt at skrive HTML inde i react-koden. Browseren forstår ikke JSX alligevel, så React er nødt til at gengive den til læsbar HTML-kode.

15. Hvad er forskellen mellem en komponent og et element

Et element er en tilstandsløs og uforanderlig definition af en virtuel DOM-knude. Den indeholder både en type og egenskab, men ingen metoder som en komponent har. Denne mangel på metoder gør det hurtigt.

16. Hvad er en tilstand i React?

En tilstand i React refererer til et indbygget objekt i en komponent, der bruges til at opbevare og administrere information om den pågældende komponent. En tilstand kan ændre sig over tid, og vil således udløse en gengivelse af den komponent. Du skal definere tilstanden i komponentens konstruktormetode, ellers bliver komponenten tilstandsløs.

17. Hvad er en statsløs komponent?

En statsløs React-komponent har ikke en tilstand. Det betyder, at du hverken kan indstille dens tilstand med this.setState() metode eller har den gengivet. En statsløs komponent kan dog have rekvisitter.

18. Hvordan opdaterer du en tilstand i React

Du opdaterer en komponents tilstand ved at kalde dens this.setState() fremgangsmåde.

19. Forklar Reacts strenge tilstand

Reacts strenge tilstand er et værktøj, der hjælper udvikleren med at opdage potentielle problemer i applikationen ved at aktivere dybere kontrol på komponenter og fremhæve flere advarsler. Strict mode er kun tilgængelig i udviklingstilstand.

20. Hvad betyder Lifting State Up in React?

Det betyder at lade underordnede komponenter dele en fælles tilstand fra deres forælder, da dette gør tingene nemmere at administrere end for hver underordnede komponent at administrere den fælles tilstand individuelt.

21. Hvordan videregiver du data i React?

Du videregiver data i React ved hjælp af rekvisitter og tilbagekald. Reacts rekvisitter er ensrettede, hvilket tillader egenskaber kun at overføre fra overordnede komponenter til deres børn. For at videregive data fra en underordnet komponent til en forælder skal du bruge en tilbagekaldsfunktion.

22. Definer Flux i React

Flux er et ensrettet koncept til at styre datastrømmen i en applikation. At være ensrettet betyder, at data kun kan overføres fra overordnede til underordnede komponenter. Flux kan også inkludere flere datalagre pr. app.

23. Definer Redux i React

Redux er et nyttigt open source JavaScript-bibliotek til styring af komplekse tilstande i en applikation. Den er uafhængig og kan bruges i andre rammer såsom Angular. I modsætning til Flux centraliserer Redux en applikations tilstandsstyring og gør det derved nemmere at bygge komplekse brugergrænseflader.

24. Hvornår skal du bruge Redux?

Ikke alle apps har brug for Redux. Men det er nyttigt under følgende forhold:

1. Når du har store mængder applikationstilstande i din app
2. Når din apps logik er kompleks
3. Når din app har en stor kodebase
4. Når du ofte skal opdatere appen
5. Når du har mange mennesker, der arbejder på appen

25. Hvad er den største forskel mellem Redux og Flux?

Den største forskel mellem de to er, at Redux administrerer alle applikationsdata fra en enkelt butik, mens du kan have flere butikker under Flux.

26. Liste over komponenterne i Redux

Der er 4 hoveddele af Redux:

1. Butik – Det er her, du gemmer applikationstilstanden.
2. Handling – Det er hændelser, der får appen til at sende data til Redux-butikken.
3. Reducer – Dette er en funktion, der accepterer den aktuelle app-tilstand og en handling som argumenter og derefter returnerer en ny tilstand som resultat.
4. middleware – Denne funktion giver en udvikler mulighed for at fange alle handlinger fra en komponent, før de når reduceringsfunktionen.

27. Hvad er React Hooks?

React hooks er en funktion af funktionskomponenter, der giver dig adgang til forskellige React-funktioner, såsom tilstandsdata og gengivelsesopdateringer. Det blev introduceret i React 16.8.

28. Angiv typen af ​​kroge i React

Der er 15+ hooks i React, startende fra de grundlæggende hooks som useState, useEffect og useContext til yderligere hooks som useCallback, useReducer, useMemo, useRef og så videre.

29. Hvad er Fragmenter?

Et React-fragment er en praktisk måde at gruppere flere underordnede elementer i en komponent uden at tilføje dem til DOM. Du definerer blot tagget ved hjælp af:

<>

or

og indlæs alle de underordnede elementer, du ønsker indeni. Den eneste forskel er, at den korte version <> ikke accepterer nøgler og attributter, mens den lange version gør.

30. Angiv de vigtigste metoder i react-dom-pakken

De er createPortal() til at rendere børn til en ekstern DOM og flushSync() til fjernelse af opdateringer. Der er også metoderne render() og hydrate(), som er blevet erstattet af createRoot() og hydrateRoot() siden React 18.

31. Hvad er React Keys?

Nøgler er unikke identifikatorer, der bedst bruges til at administrere lister. Taster gør det nemt at identificere de enkelte elementer på en liste og at vide, hvornår hvert element er blevet opdateret, slettet eller ændret på nogen måde.

32. Hvorfor er React Keys vigtige?

Nøgler er vigtige i React, fordi det hjælper med den effektive gengivelse af den rigtige DOM. React er god, fordi den forsøger at minimere, hvilke komponenter den gengiver efter en hændelse, og brug af nøgler på en liste forhindrer React i at skulle gengive hele lister, hvilket kan være et problem med store lister.

33. Hvad er en hændelse i React?

En hændelse er enhver handling i en app, der kommer fra enten brugeren eller systemet. En begivenhed kan spænde fra et klik med musen eller et tryk på mobile enheder til en vinduesstørrelse, tastetryk, træk, fokus og så videre.

34. Forklar hvad Syntetisk begivenhed Midler

En syntetisk hændelse er en indpakning omkring en browsers native hændelser, hvor problemet er, at forskellige browsere navngiver deres hændelser forskelligt. React bruger syntetiske hændelser for at undgå problemet med at skulle oprette flere implementeringer og metoder til alle de forskellige browsere derude. På denne måde opretholder React fælles navne for alle de forskellige browserhændelser som en samlet API.

35. Hvad er Webpack?

Webpack er et modulbundtningssystem, der bruges til at kombinere og minificere JavaScript- og CSS-filer. Det er bygget på Node.js og er nyttigt, når du arbejder med et stort antal filer eller ikke-kodeaktiver som billeder og skrifttyper.

36. Hvad er create-react-appen?

Create-react-app er et værktøj, der hjælper dig med at oprette en enkeltsides React-applikation i dit Node.js-miljø. Den genererer alle de filer og mapper, du skal bruge for at starte en grundlæggende app, og du tager den derfra. Det kræver Node version 14.0.0 opefter og npm fra ver. 5.6.

Brugen er enkel:

npx create-react-app myNewApp

cd minNyeApp

npm start

37. Kan du rendere serversiden med React?

Ja, det kan du, selvom det kan blive ressourcekrævende til store projekter. Gengivelse på serversiden er nyttig, da den forbedrer brugeroplevelsen og SEO. Du skal bruge et Node.js-miljø, en bundler som Webpack og en framework som Next.js og Remix for at gengive React-apps under kørsel. En løsning på det intensive ressourceforbrug er at bruge en statisk webstedsgenerator, såsom den Next.js-baserede Gatsby.

38. Forklar, hvad en pilfunktion gør

En pilefunktion er simpelthen en kortere måde at definere funktioner på. Det er en ES6 stenografi, der erstatter:

= funktion() med ()=>.

For eksempel:

test = funktion(){

returnere "Dette er en test";

}

så bliver:

test = () => {

returnere "Dette er en test";

}

eller for enkeltlinjeudsagn:

test = () => "Dette er en test";

39. Hvad er en Reager router?

React-router er et bibliotek, der giver routing-funktionalitet i en React-app. Det gør det nemt at inkludere og bruge omfattende navigationskomponenter, som kan være meget nyttige til store eller komplekse projekter.

40. Hvad er de vigtigste fordele ved at bruge React Router?

Det opretter forskellige url-stier til din app og giver window.location-værdier og et historikobjekt.

41. Hvad er ComponentWillUnmount()?

Dette er en komponentmetode, der bliver kaldt, når React er ved at ødelægge komponenten. Det er et rart sted at rydde op i ting, rydde timere, annullere netværksanmodninger og håndtere andre vigtige deinitialiseringsproblemer.

42. Hvad er The Constructor()?

Konstruktøren er komponentens metode, der bliver kaldt under komponentens initialisering. Det bruges typisk til initialisering af lokale stater og til binding af hændelseshåndteringsmetoder.

43. Hvad er Virtual DOM?

Reacts virtuelle DOM er en let kopi af det faktiske HTML-dokuments DOM. Det bruges til effektiv styring og opdatering af ændringer på den rigtige DOM.

44. Hvad er fordelene ved Virtual DOM over Real DOM?

Den virtuelle DOM er let og hurtigere at rendere end den rigtige DOM, og dette gør det mere effektivt at rendere til den virtuelle DOM først og kun foretage ændringer i den rigtige DOM, når der er behov. Hver node på den rigtige DOM har en tilsvarende komponent på den virtuelle DOM, og når der først er ændringer til en virtuel komponent efter gengivelse, ved React så præcis, hvilken ægte HTML-node der skal opdateres eller slettes.

45. Forklar begrebet Afstemning i React

Afstemning er Reacts metode til kun at opdatere den rigtige DOM, når det er nødvendigt, ved at tjekke opdaterede versioner af den virtuelle DOM gennem diffing og kun opdatere de nøjagtige noder, der ændrede sig på den rigtige DOM.

46. Forklar begrebet Profiler i React

Profiler er et React-værktøj, der hjælper med at optimere en app ved at måle, hvor mange gange en applikation renderer, og hvor lang tid det tager hver komponent at rendere. Dette hjælper udvikleren med at identificere dele af applikationen, der kan have behov for optimering.

47. Forklar begrebet Kontekst i React

Kontekst er en metode til at overføre data mellem React-komponenter på mange niveauer uden at skulle sende dataene gennem hvert indlejringsniveau ved hjælp af rekvisitter. Den bruges bedst til nem datadeling med mange komponenter, der ikke behøver konstante opdateringer, såsom temaoplysninger og brugerdata. Dens ulempe er, at det kan gøre genbrug af komponenter vanskelig.

48. Forklar begrebet Montering i React

Montering i React er processen med at fastgøre en komponent som en node til DOM. Afmontering er det modsatte.

49. Forklar begrebet rendering i React

Gengivelse er processen med at tegne en komponent. Det sker normalt, når komponentens tilstand ændres, og React skal tegne brugergrænsefladen igen. Hvis en komponent gentegnes under gengivelsen, bliver dens underordnede komponenter også tegnet igen.

50. Forklar begrebet Fejlgrænse i React

Fejlgrænse refererer til en React-komponent, der fanger JavaScript-fejlene fra dens underordnede komponenter, logger fejlene og viser en reserve-brugergrænseflade i stedet for de noder, der gik ned. Fejlgrænser blev introduceret i React 16.

Konklusion

Vi er nået til slutningen af ​​denne liste over de 50 bedste React-interviewspørgsmål, du skal vide, og du burde forhåbentlig have en god idé om, hvad du kan forvente nu.

Du skal også bemærke, at intet forbliver det samme, og dit interview kan tage enhver retning. Derfor bør du fortsætte med at studere og holde dig opdateret.