De 50 beste React-intervjuspørsmålene og -svarene du må vite

ReactJS-utviklere er svært ettertraktede og det er en god grunn til det. Men du må bevise dine ferdigheter i rammeverket for å få jobben.

Følgende er ofte stilte React-utviklingsspørsmål og deres svar som du bør være oppmerksom på. Den inkluderer alt fra det grunnleggende til mer avanserte emner.

1. Hva er React?

React er et gratis JavaScript-bibliotek med åpen kildekode for utvikling av brukergrensesnitt, som bruker komponenter til å lage utdata for enkeltsideapplikasjoner. React ble utviklet av Facebook (Meta) og vedlikeholdes av et utviklerfellesskap.

2. List opp de viktige egenskapene til React

De viktigste funksjonene til React inkluderer:

1. Brukervennlighet
2. Rask utvikling
3. Bruk av komponenter
4. jsx
5. Den virtuelle DOM
6. Høy ytelse
7. Enveis databinding

3. Hvor er Reacts prosjektlager?

React er et mono-depot som bor på https://github.com/facebook/react. Å være et mono-repository betyr at all kode og andre kilder lagres på samme sted for enklere utvikling og administrasjon.

4. Hva er den nåværende stabile versjonen av React?

Den nyeste stabile versjonen av React fra 14. juni 2022 er 18.2.0.

5. Angi forskjellene mellom React Native og ReactJS

React og ReactJS er de samme, mens React Native er bygget på React. For forskjellene deres brukes React til å lage dynamiske og responsive brukergrensesnitt for webapplikasjoner, mens React Native er designet for å bygge applikasjoner som mobilapper.

6. Hva er forskjellen mellom et element og en komponent?

Et React-element er et enkelt og uforanderlig objekt laget for å representere en DOM-node. Å være uforanderlig betyr at den ikke kan endres når den først er opprettet, slik den gjengis til DOM. En React-komponent er på den annen side mutbar og produserer JSX-utdata når den er gjengitt.

7. Hvordan lager du en komponent?

Det er to måter å lage en komponent i React: 1.) Funksjonskomponenter og 2.) klassekomponenter. Som navnene tilsier, opprettes en funksjonskomponent ved hjelp av en funksjonserklæring, mens en klassekomponent opprettes ved hjelp av 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 opp de 4 stadiene i en React-komponent

En React-komponent gjennomgår følgende 4 stadier i livssyklusen:

1. Det første stadiet – Komponentkonstruksjon i standardtilstand med innledende rekvisitter
2. Monteringsfase – JSX-gjengivelse av komponenten
3. Oppdaterer fase – Endringer i komponenttilstand og omtegning av søknad
4. Avmonteringsfase – Fjerning av komponenter fra DOM

9. Forklar hva en høyere ordens komponent betyr

En høyere-ordens komponent (HOC) er en React-metodikk for å lage komponenter. Den bruker en eksisterende komponent for å lage en ny med ekstra funksjonalitet. Med andre ord er en HOC en funksjon som tar en komponent som et argument og returnerer en ny komponent med ekstra funksjoner.

10. Hva er kontrollerte og ukontrollerte komponenter?

En kontrollert komponent er en React-komponent som tar sin verdi gjennom rekvisitter og varsler systemet om eventuelle endringer gjennom tilbakeringinger. Den styres av en overordnet komponent som administrerer dens stat og sender verdiene som rekvisitter til den kontrollerte komponenten. En ukontrollert komponent, derimot, styrer tilstanden sin, og du må spørre om DOM ved hjelp av ref for å få verdien.

11. Hva er rekvisitter i React?

Rekvisitter i React er bare en enkel måte å si egenskaper på, og med det refererer du til egenskapene til en komponent. Rekvisitter brukes til å overføre data fra en overordnet komponent til en eller flere underordnede komponenter, og de er skrivebeskyttet til den underordnede komponenten.

12. Hva er rekvisitter.barn?

Props.children-attributtet inneholder informasjon om alt innholdet i en komponent som har en åpnings- og en lukkekode. Disse barna refererer til alle elementer som er definert inne i den gjeldende komponenten, og kan være ett, mange eller ingen.

13. Kan du oppdatere rekvisitter i React?

Nei, rekvisitter i React er ovenfra og ned og uforanderlige. Dette betyr at en komponent kan sende alle egenskaper den liker til barna sine, men den kan ikke oppdatere rekvisittene. Bare foreldrene kan oppdatere rekvisittene.

14. Hva er JSX?

JSX står for JavaScript XML. Det er en JavaScript-syntaksutvidelse som gjør det mulig å skrive HTML inne i react-koden. Nettleseren forstår ikke JSX uansett, så React må gjengi den til lesbar HTML-kode.

15. Hva er forskjellen mellom en komponent og et element

Et element er en tilstandsløs og uforanderlig definisjon av en virtuell DOM-node. Den inneholder både en type og egenskap, men ingen metoder som en komponent har. Denne mangelen på metoder gjør det raskt.

16. Hva er en tilstand i React?

En tilstand i React refererer til et innebygd objekt i en komponent som brukes til å holde og administrere informasjon om den komponenten. En tilstand kan endre seg over tid, og vil dermed utløse en re-gjengivelse av den komponenten. Du må definere tilstanden i komponentens konstruktørmetode, ellers blir komponenten tilstandsløs.

17. Hva er en statsløs komponent?

En statsløs React-komponent har ikke en tilstand. Dette betyr at du verken kan sette dens tilstand med this.setState() metode eller har den gjengitt. En statsløs komponent kan imidlertid ha rekvisitter.

18. Hvordan oppdaterer du en tilstand i React

Du oppdaterer en komponents tilstand ved å kalle dens this.setState() metoden.

19. Forklar Reacts strenge modus

Reacts strenge modus er et verktøy som hjelper utvikleren med å oppdage potensielle problemer i applikasjonen ved å aktivere dypere kontroller på komponenter og fremheve flere advarsler. Strenge modus er kun tilgjengelig i utviklingsmodus.

20. Hva betyr Lifting State Up in React?

Det betyr å la underordnede komponenter dele en felles tilstand fra foreldrene sine, da dette gjør ting enklere å administrere enn for hver underordnede komponent å administrere den felles tilstanden individuelt.

21. Hvordan sender du data i React?

Du sender data i React ved hjelp av rekvisitter og tilbakeringinger. Reacts rekvisitter er ensrettet, slik at egenskaper bare kan overføres fra overordnede komponenter til barna sine. For å overføre data fra en underordnet komponent til en forelder, må du bruke en tilbakeringingsfunksjon.

22. Definer Flux i React

Flux er et ensrettet konsept for å styre dataflyten i en applikasjon. Å være ensrettet betyr at data bare kan overføres fra overordnede til underordnede komponenter. Flux kan også inkludere flere datalagre per app.

23. Definer Redux i React

Redux er et nyttig JavaScript-bibliotek med åpen kildekode for å administrere komplekse tilstander i en applikasjon. Den er uavhengig og kan brukes i andre rammeverk som Angular. I motsetning til Flux sentraliserer Redux en applikasjons tilstandsadministrasjon, og gjør det dermed enklere å bygge komplekse brukergrensesnitt.

24. Når bør du bruke Redux?

Ikke alle apper trenger Redux. Men det er nyttig under følgende forhold:

1. Når du har store mengder applikasjonstilstander i appen din
2. Når appens logikk er kompleks
3. Når appen din har en stor kodebase
4. Når du må oppdatere appen ofte
5. Når du har mange som jobber med appen

25. Hva er den store forskjellen mellom Redux og Flux?

Den største forskjellen mellom de to er at Redux administrerer alle applikasjonsdata fra en enkelt butikk, mens du kan ha flere butikker under Flux.

26. Liste over komponentene i Redux

Det er 4 hoveddeler av Redux:

1. Butikk – Det er her du lagrer applikasjonstilstanden.
2. Handling – Dette er hendelser som får appen til å sende data til Redux-butikken.
3. Redusering – Dette er en funksjon som aksepterer gjeldende apptilstand og en handling som argumenter, og som deretter returnerer en ny tilstand.
4. Middleware – Denne funksjonen lar en utvikler fange opp alle handlinger fra en komponent før de når reduseringsfunksjonen.

27. Hva er React Hooks?

React-kroker er en funksjon av funksjonskomponenter som gir deg tilgang til forskjellige React-funksjoner, for eksempel tilstandsdata og gjengivelsesoppdateringer. Det ble introdusert i React 16.8.

28. List opp typen kroker i React

Det er 15+ kroker i React, fra de grunnleggende krokene som useState, useEffect og useContext til ytterligere kroker som useCallback, useReducer, useMemo, useRef, og så videre.

29. Hva er Fragmenter?

Et React-fragment er en praktisk måte å gruppere flere underordnede elementer i en komponent, uten å legge dem til DOM. Du definerer bare taggen ved å bruke:

<>

or

og last inn alle underelementene du vil ha inni. Den eneste forskjellen er at kortversjonen <> ikke aksepterer nøkler og attributter, mens den lange versjonen gjør det.

30. List opp hovedmetodene til react-dom-pakken

De er createPortal() for å gjengi barn til en ekstern DOM og flushSync() for flushing av oppdateringer. Det er også metodene render() og hydrate(), som har blitt erstattet av createRoot() og hydrateRoot() siden React 18.

31. Hva er React Keys?

Nøkler er unike identifikatorer som best brukes til å administrere lister. Taster gjør det enkelt å identifisere de enkelte elementene i en liste og å vite når hvert element har blitt oppdatert, slettet eller endret på noen måte.

32. Hvorfor er React Keys viktige?

Nøkler er viktige i React fordi det hjelper til med effektiv gjengivelse av den virkelige DOM. React er bra fordi den prøver å minimere hvilke komponenter den gjengir etter en hendelse, og bruk av nøkler på en liste forhindrer at React må gjengi hele lister, noe som kan være et problem med store lister.

33. Hva er en hendelse i React?

En hendelse er enhver handling i en app som kommer fra enten brukeren eller systemet. En hendelse kan variere fra et museklikk eller trykk på mobile enheter til å endre størrelse på vindu, tastetrykk, dra, fokusere og så videre.

34. Forklar hva Syntetisk begivenhet Midler

En syntetisk hendelse er en innpakning rundt nettleserens opprinnelige hendelser, med problemet at forskjellige nettlesere navngir hendelsene deres annerledes. React bruker syntetiske hendelser for å unngå problemet med å måtte lage flere implementeringer og metoder for alle de forskjellige nettleserne der ute. På denne måten opprettholder React vanlige navn for alle de forskjellige nettleserhendelsene som en enhetlig API.

35. Hva er Webpack?

Webpack er et modulbuntingssystem som brukes til å kombinere og minifisere JavaScript- og CSS-filer. Den er bygget på Node.js og er nyttig når du arbeider med et stort antall filer eller ikke-kodede eiendeler som bilder og fonter.

36. Hva er create-react-appen?

Create-react-app er et verktøy som hjelper deg å lage en enkeltsides React-applikasjon i ditt Node.js-miljø. Den genererer alle filene og mappene du trenger for å starte en grunnleggende app, og du tar den derfra. Det krever Node versjon 14.0.0 oppover og npm fra ver. 5.6.

Bruken er enkel:

npx create-react-app myNewApp

cd myNewApp

npm start

37. Kan du gjengi serversiden med React?

Ja, det kan du, selv om det kan bli ressurskrevende for store prosjekter. Gjengivelse på serversiden er nyttig ettersom det forbedrer brukeropplevelsen og SEO. Du trenger et Node.js-miljø, en bundler som Webpack og et rammeverk som Next.js og Remix for å gjengi React-apper under kjøring. En løsning på den intensive ressursbruken er å bruke en statisk nettstedsgenerator, slik som Next.js-basert Gatsby.

38. Forklar hva en pilfunksjon gjør

En pilfunksjon er ganske enkelt en kortere måte å definere funksjoner på. Det er en ES6 stenografi som erstatter:

= funksjon() med ()=>.

For eksempel:

test = funksjon(){

return "Dette er en test";

}

blir da:

test = () => {

returner "Dette er en test";

}

eller for enkeltlinjeutsagn:

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

39. Hva er en Reager ruter?

React-ruteren er et bibliotek som gir rutingfunksjonalitet i en React-app. Det gjør det enkelt å inkludere og bruke rike navigasjonskomponenter, noe som kan være svært nyttig for store eller komplekse prosjekter.

40. Hva er hovedfordelene ved å bruke React Router?

Den oppretter forskjellige url-baner for appen din og gir window.location-verdier og et historikkobjekt.

41. Hva er ComponentWillUnmount()?

Dette er en komponentmetode som blir kalt når React er i ferd med å ødelegge komponenten. Det er et fint sted å rydde opp i ting, slette tidtakere, kansellere nettverksforespørsler og håndtere andre viktige deinitialiseringsproblemer.

42. Hva er The Constructor()?

Konstruktøren er komponentens metode som blir kalt under komponentens initialisering. Den brukes vanligvis for å initialisere lokale stater og for å binde hendelsesbehandlermetoder.

43. Hva er Virtual DOM?

Reacts virtuelle DOM er en lett kopi av det faktiske HTML-dokumentets DOM. Den brukes til effektiv administrasjon og oppdatering av endringer på den virkelige DOM.

44. Hva er fordelene med Virtual DOM fremfor ekte DOM?

Den virtuelle DOM er lett og raskere å gjengi enn den virkelige DOM, og dette gjør det mer effektivt å gjengi til den virtuelle DOM først og bare gjøre endringer i den virkelige DOM når det er behov. Hver node på den virkelige DOM har en tilsvarende komponent på den virtuelle DOM, og når det er endringer i en virtuell komponent etter gjengivelse, vet React nøyaktig hvilken ekte HTML-node som skal oppdateres eller slettes.

45. Forklar begrepet Forsoning i React

Avstemming er Reacts metode for å oppdatere den virkelige DOM kun når det er nødvendig, ved å sjekke oppdaterte versjoner av den virtuelle DOM gjennom diffing og kun oppdatere de eksakte nodene som endret seg på den virkelige DOM.

46. Forklar begrepet Profiler i React

Profiler er et React-verktøy som hjelper til med å optimalisere en app ved å måle hvor mange ganger en applikasjon gjengir og hvor lang tid det tar å gjengi hver komponent. Dette hjelper utvikleren med å identifisere deler av applikasjonen som kan trenge optimalisering.

47. Forklar begrepet Kontekst i React

Kontekst er en metode for å sende data mellom React-komponenter på mange nivåer uten å måtte sende dataene gjennom hvert neste nivå ved hjelp av rekvisitter. Den brukes best for enkel datadeling med mange komponenter som ikke trenger konstante oppdateringer, for eksempel temainformasjon og brukerdata. Ulempen er at det kan gjøre gjenbruk av komponenter vanskelig.

48. Forklar begrepet Montering i React

Montering i React er prosessen med å feste en komponent som en node til DOM. Avmontering er det motsatte.

49. Forklar begrepet Rendering i React

Gjengivelse er prosessen med å tegne en komponent. Det oppstår vanligvis når komponentens tilstand endres og React må tegne brukergrensesnittet på nytt. Hvis en komponent tegnes på nytt under gjengivelsen, blir dens underordnede komponenter også tegnet på nytt.

50. Forklar begrepet Feilgrense i React

Feilgrense refererer til en React-komponent som fanger opp JavaScript-feilene fra dens underordnede komponenter, logger feilene og viser et reservegrensesnitt i stedet for nodene som krasjet. Feilgrenser ble introdusert i React 16.

Konklusjon

Vi har nådd slutten av denne listen over de 50 beste React-intervjuspørsmålene du må vite, og du bør forhåpentligvis ha en god ide om hva du kan forvente nå.

Du bør også merke deg at ingenting forblir det samme og intervjuet kan ta alle retninger. Derfor bør du fortsette å studere og holde deg oppdatert.