Top 50 Must-Wëssen React Interview Froen an Äntwerten

ReactJS Entwéckler sinn héich gesicht an et gëtt e gudde Grond dofir. Awer Dir musst Är Kompetenzen am Kader beweisen fir den Job ze kréien.

Déi folgend ginn dacks gefrot React Entwécklungsfroen an hir Äntwerten déi Dir sollt bewosst sinn. Et enthält alles vun de Basics bis méi fortgeschratt Themen.

1. Wat ass React?

React ass eng gratis an Open-Source JavaScript Bibliothéik fir User Interface Entwécklung, déi Komponente benotzt fir Output fir eenzel Säit Uwendungen ze kreéieren. React gouf vu Facebook (Meta) entwéckelt a gëtt vun enger Entwécklergemeinschaft ënnerhal.

2. Lëscht déi wichteg Feature vu React

Déi wichtegst Feature vum React enthalen:

1. Einfacher Benotzung
2. Schnell Entwécklung
3. D'Benotzung vun Komponente
4. JSX
5. Virtuell DOM
6. héich performant
7. One-Manéier Dateverbindung

3. Wou ass dem React säi Projet Repository?

React ass e Mono-Repository dee lieft https://github.com/facebook/react. E Mono-Repository ze sinn heescht datt all säi Code an aner Quellen op der selwechter Plaz gespäichert ginn fir méi einfach Entwécklung a Gestioun.

4. Wat ass déi aktuell stabil Versioun vu React?

Déi aktuellst stabil Versioun vu React vum 14. Juni 2022 ass 18.2.0.

5. Staat d'Ënnerscheeder tëscht React Native a ReactJS

React a ReactJS sinn d'selwecht, während React Native op React gebaut ass. Fir hir Differenzen gëtt React benotzt fir dynamesch a reaktiounsfäeg User-Interfaces fir Webapplikatiounen ze kreéieren, während React Native entwéckelt ass fir Uwendungen als mobil Apps ze bauen.

6. Wat ass den Ënnerscheed tëscht engem Element an engem Komponent?

E React Element ass en einfachen an onverännerbaren Objet erstallt fir en DOM Node ze representéieren. Onverännerbar ze sinn heescht datt et net geännert ka ginn nodeems et erstallt gouf, well et op d'DOM gëtt. E React Komponent, op der anerer Säit, ass mutéierbar a produzéiert JSX Output eemol geliwwert.

7. Wéi erstellt Dir e Komponent?

Et ginn zwou Weeër fir e Komponent am React ze kreéieren: 1.) Funktiounskomponenten an 2.) Klassekomponenten. Wéi d'Nimm implizéieren, gëtt eng Funktiounskomponent mat enger Funktiounserklärung erstallt, während eng Klassekomponent mat enger Klasserklärung erstallt gëtt.

//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. Lëscht déi 4 Etappe vun engem Reaktiounskomponent

E React Komponent erfëllt déi folgend 4 Stadien a sengem Liewenszyklus:

1. Éischt Etapp - Komponentkonstruktioun am Standardzoustand mat initial Requisiten
2. Montage Phase - JSX Rendering vun der Komponent
3. Update Phase - Komponent Staat Ännerungen an Applikatioun redrawing
4. Phase demontage - Komponententfernung vum DOM

9. Erkläert wat e méi héijer Uerdnungskomponent bedeit

Eng méi héijer Uerdnung Komponent (HOC) ass eng React Methodologie fir Komponenten ze kreéieren. Et benotzt eng existent Komponent fir en neien mat extra Funktionalitéit ze kreéieren. An anere Wierder, en HOC ass eng Funktioun déi e Komponent als Argument hëlt an en neie Komponent mat zousätzlech Funktiounen zréckkënnt.

10. Wat sinn kontrolléiert an onkontrolléiert Komponenten?

E kontrolléierte Komponent ass e React Komponent dee säi Wäert duerch Requisiten hëlt an de System iwwer all Ännerungen duerch Callbacks informéiert. Et gëtt kontrolléiert vun engem Elterendeel Komponent deen seng geréiert Staat a passéiert d'Wäerter als Requisiten un déi kontrolléiert Komponent. Eng onkontrolléiert Komponent, op der anerer Säit, geréiert säin Zoustand, an Dir musst d'Fro stellen DOM Hëllef Refus fir säi Wäert ze kréien.

11. Wat sinn Requisiten am React?

Requisiten am React ass just en einfache Wee fir Eegeschaften ze soen, an domat schwätzt Dir op d'Eegeschafte vun engem Komponent. Requisiten gi benotzt fir Daten vun engem Elterendeel un een oder méi Kannerkomponenten ze passéieren, a si sinn nëmme liesen un d'Kandkomponent.

12. Wat sinn Requisiten.Kanner?

De Props.children Attribut enthält Informatiounen iwwer all Inhalt vun engem Komponent deen eng Ouverture an e Schluss Tag huet. Dës Kanner bezéien sech op all Elementer, déi an der aktueller Komponent definéiert sinn, a kënnen een, vill oder keng sinn.

13. Kënnt Dir Requisiten am React aktualiséieren?

Nee, Requisiten am React sinn top-down an onverännerbar. Dëst bedeit datt e Bestanddeel all Eegeschafte kann schécken déi se gär huet fir seng Kanner, awer et kann seng Requisiten net aktualiséieren. Nëmme seng Elteren kënnen seng Requisiten aktualiséieren.

14. Wat ass JSX?

JSX steet fir JavaScript XML. Et ass eng JavaScript Syntax Extensioun déi et méiglech mécht HTML am Reaktiounscode ze schreiwen. De Browser versteet JSX iwwerhaapt net, also React muss et an liesbaren HTML Code maachen.

15. Wat ass den Ënnerscheed tëscht engem Komponent an engem Element

En Element ass eng statelos an onverännerbar Definitioun vun engem virtuellen DOM Node. Et enthält souwuel eng Aart a Besëtz, awer keng Methode wéi e Komponent huet. Dëse Mangel u Methoden mécht et séier.

16. Wat ass e Staat am React?

E Staat am React bezitt sech op en agebauten Objet an engem Komponent dee benotzt gëtt fir Informatioun iwwer dës Komponent ze halen an ze managen. E Staat kann mat der Zäit änneren, a wäert also e Re-Rendering vun där Komponent ausléisen. Dir musst de Staat an der Konstruktormethod vun der Komponent definéieren, oder soss gëtt de Komponent stateless.

17. Wat ass e stateless Komponent?

E stateless React Komponent huet kee Staat. Dëst bedeit datt Dir weder säi Staat mat astellen kann this.setState() Method nach net gemaach. Eng stateless Komponent kann awer Requisiten hunn.

18. Wéi update Dir e Staat an React

Dir aktualiséieren den Zoustand vun engem Komponent andeems Dir seng rufft this.setState() Method.

19. Erkläert React's Strikt Modus

De strenge Modus vum React ass en Tool dat den Entwéckler hëlleft potenziell Probleemer an der Applikatioun z'entdecken andeems se méi déif Kontrollen op Komponenten aktivéieren a méi Warnungen markéieren. Strikte Modus ass nëmmen am Entwécklungsmodus verfügbar.

20. Wat heescht Lifting State Up am React heeschen?

Et heescht datt d'Kandkomponenten e gemeinsame Staat vun hirem Elterendeel deelen loossen, well dëst d'Saache méi einfach ze verwalten mécht wéi fir all Kandkomponent fir de gemeinsame Staat individuell ze managen.

21. Wéi passéiert Dir Daten am React?

Dir passéiert Daten am React mat Hëllef vu Requisiten a Callbacks. Dem React seng Requisiten sinn unidirektional, wat et erlaabt Eegeschafte nëmme vun Elterendeel un hir Kanner ze passéieren. Fir Daten vun engem Kand Komponent un engem Elterendeel Passe, Dir musst eng Callback Funktioun benotzen.

22. Definéieren onkontrolléiert am Reaktioun

Flux ass en unidirektional Konzept fir de Flux vun Daten an enger Applikatioun ze dirigéieren. Unidirectional ze sinn heescht datt Daten nëmme vun Elterendeel op Kanner Komponente kënne passéieren. Flux kann och méi Daten Geschäfter pro App enthalen.

23. Definéieren redux am Reaktioun

Redux ass eng hëllefräich Open-Source JavaScript Bibliothéik fir komplexe Staaten an enger Applikatioun ze managen. Et ass onofhängeg a kann an anere Kaderen wéi Angular benotzt ginn. Am Géigesaz zu Flux zentraliséiert Redux d'Staatsmanagement vun enger Applikatioun, sou datt et méi einfach gëtt komplex UIs ze bauen.

24. Wéini Sollt Dir Redux benotzen?

Net all Apps brauchen Redux. Awer et ass hëllefräich an de folgende Konditiounen:

1. Wann Dir grouss Quantitéiten vun Applikatioun Staaten an Ärer App hutt
2. Wann d'Logik vun Ärer App komplex ass
3. Wann Är App eng grouss Codebase huet
4. Wann Dir musst d'App dacks aktualiséieren
5. Wann Dir vill Leit un der App schaffen

25. Wat ass de groussen Ënnerscheed tëscht Redux a Flux?

De groussen Ënnerscheed tëscht deenen zwee ass datt Redux all Applikatiounsdaten aus engem eenzege Geschäft geréiert, während Dir verschidde Geschäfter ënner Flux hutt.

26. Lëscht vun de Komponente vun Redux

Et gi 4 Haaptdeeler vu Redux:

1. Store - Dëst ass wou Dir den Uwendungsstat späichert.
2. Aktiounen - Dëst sinn Eventer déi d'App verursaache fir Daten an de Redux Store ze schécken.
3. Reduzéierter - Dëst ass eng Funktioun déi den aktuellen App Zoustand an eng Handlung als Argumenter akzeptéiert, an dann en neien Zoustand als Resultat zréckginn.
4. Middleware - Dës Feature erlaabt en Entwéckler all Aktiounen vun engem Komponent z'erreechen ier se d'Reduktiounsfunktioun erreechen.

27. Wat sinn React Hooks?

React Hooks sinn eng Feature vu Funktiounskomponenten déi Iech Zougang zu verschiddene React Features erlaben, sou wéi Staatsdaten a Renderingupdates. Et gouf a React 16.8 agefouert.

28. Lëscht der Zort Hooks an React

Et gi 15+ Haken am React, ugefaange vun de Basishaken wéi useState, useEffect, an useContext bis zousätzlech Haken wéi useCallback, useReducer, useMemo, useRef, a sou weider.

29. Wat sinn Fragmenter?

E React Fragment ass e praktesche Wee fir verschidde Kannerelementer an enger Komponent ze gruppéieren, ouni se op d'DOM ze addéieren. Dir definéiert einfach den Tag mat:

<>

or

a lued all Kand Elementer Dir bannen wëllt. Deen eenzegen Ënnerscheed ass datt déi kuerz Versioun <> keng Schlësselen an Attributer akzeptéiert, während déi laang Versioun et mécht.

30. Lëscht d'Haaptmethoden vum React-dom Package

Si sinn de createPortal () fir Kanner an en externen DOM ze maachen an de FlushSync () fir Updates ze spülen. Et ginn och d'Render () an hydrate () Methoden, déi duerch createRoot () an hydrateRoot () ersat goufen zënter React 18.

31. Wat sinn React Keys?

Schlësselen sinn eenzegaarteg Identifizéierer déi am Beschten benotzt gi fir Lëschten ze managen. Schlësselen maachen et einfach déi eenzel Elementer an enger Lëscht z'identifizéieren an ze wëssen wéini all Element op iergendeng Manéier aktualiséiert, geläscht oder geännert gouf.

32. Firwat sinn React Keys wichteg?

Schlëssele si wichteg am React well et hëlleft bei der effizienter Rendering vun der realer DOM. React ass gutt well et probéiert ze minimiséieren wéi eng Komponenten et no engem Event erstallt gëtt, a Schlësselen op enger Lëscht ze benotzen verhënnert datt React ganz Lëschte muss nei maachen, wat e Problem mat grousse Lëschte ka sinn.

33. Wat ass en Event am React?

En Event ass all Handlung an enger App déi entweder vum Benotzer oder vum System kënnt. En Event ka variéieren vun engem Mausklick oder op mobilen Apparater op eng Fënstergréisst änneren, Tastepress, Drag, Fokus, asw.

34. Erklären wat Synthetesch Event heescht

E synthetescht Event ass e Wrapper ronderëm déi gebierteg Eventer vun engem Browser, mam Problem ass datt verschidde Browser hir Eventer anescht nennen. React benotzt syntheteschen Eventer fir de Problem ze vermeiden fir verschidde Implementatiounen a Methoden ze kreéieren fir all déi verschidde Browser dobaussen. Op dës Manéier hält React gemeinsam Nimm fir all déi verschidde Browser-Evenementer als vereenegt API.

35. Wat ass Webpack?

Webpack ass e Modulbündlingssystem benotzt fir JavaScript an CSS Dateien ze kombinéieren an ze minifizéieren. Et ass op Node.js gebaut an ass hëllefräich wann Dir mat enger grousser Zuel vu Dateien oder net-code Verméigen wéi Biller a Schrëften schafft.

36. Wat ass d'Create-React-App?

Create-react-App ass en Tool dat Iech hëlleft eng eenzeg Säit React Applikatioun an Ärem Node.js Ëmfeld ze kreéieren. Et generéiert all Dateien an Ordner déi Dir braucht fir eng Basis App unzefänken an Dir hëlt se vun do aus. Et erfuerdert Node Versioun 14.0.0 no uewen an npm vu ver. 5.6.

D'Benotzung ass einfach:

npx create-react-app myNewApp

cd myNewApp

npm ufänken

37. Kënnt Dir Server Säit mat reagéieren?

Jo, Dir kënnt, och wann et Ressourceintensiv fir grouss Projete ka kréien. Server-Säit Rendering ass hëllefräich well et d'Benotzererfarung a SEO verbessert. Dir braucht e Node.js Ëmfeld, e Bundler wéi Webpack, an e Kader wéi Next.js an kombinéieren fir React Apps beim Runtime ze maachen. Eng Léisung fir déi intensiv Ressourceverbrauch ass e statesche Site Generator ze benotzen, sou wéi den Next.js-based Gatsby.

38. Erklären Wat eng Pfeil Funktioun mécht

Eng Pfeilfunktioun ass einfach e méi kuerze Wee fir Funktiounen ze definéieren. Et ass eng ES6 Shorthand déi ersetzt:

= Funktioun() mat () =>.

Zum Beispill:

test = Funktioun(){

zréck "Dëst ass en Test";

}

da gëtt:

test = () => {

zréck "Dëst ass en Test";

}

oder fir eenzel Zeil Aussoen:

test = () => "Dëst ass en Test";

39. Wat ass eng Reagéiert Router?

React Router ass eng Bibliothéik déi Routing Funktionalitéit an enger React App ubitt. Et mécht et einfach fir räich Navigatiounskomponenten ze enthalen an ze benotzen, wat ganz hëllefräich ka sinn fir grouss oder komplex Projeten.

40. Wat sinn d'Haaptvirdeeler vum React Router ze benotzen?

Et erstellt verschidden URL Weeër fir Är App a stellt window.location Wäerter an e Geschichtsobjekt.

41. Wat ass ComponentWillUnmount ()?

Dëst ass eng Komponentmethod déi genannt gëtt wann ëmmer React amgaang ass de Komponent ze zerstéieren. Et ass eng flott Plaz fir Saachen ze botzen, Timer ze läschen, Reseau Ufroen ze annuléieren an aner wichteg Deinitialiséierungsprobleemer ze behandelen.

42. Wat ass de Constructor ()?

De Konstruktor ass d'Method vun der Komponent déi während der Initialiséierung vum Komponent opgeruff gëtt. Et gëtt typesch benotzt fir lokal Staaten ze initialiséieren a fir Event Handler Methoden ze binden.

43. Wat ass virtuell DOM?

Dem React seng virtuell DOM ass eng liicht Kopie vun der aktueller HTML Dokument DOM. Et gëtt fir effizient Gestioun an Update vun Ännerungen op der realer DOM benotzt.

44. Wat sinn d'Virdeeler vu Virtuell DOM iwwer Real DOM?

De virtuelle DOM ass liicht a méi séier ze maachen wéi déi richteg DOM, an dëst mécht et méi effizient fir d'éischt op déi virtuell DOM ze maachen an nëmmen Ännerungen un der realer DOM ze maachen wann et e Besoin ass. All Node op der realer DOM huet eng entspriechend Komponent op der virtueller DOM, a wann et Ännerunge vun enger virtueller Komponent nom Rendering gëtt, weess React dann genau wéi ee richtegen HTML Node fir ze aktualiséieren oder ze läschen.

45. Erkläert de Begrëff Reconciliatioun am Reaktioun

Reconciliatioun ass dem React seng Method fir déi richteg DOM nëmmen ze aktualiséieren wann néideg, andeems Dir aktualiséiert Versioune vun der virtueller DOM iwwerpréift duerch difféieren an nëmmen déi exakt Noden aktualiséieren déi op der realer DOM geännert hunn.

46. Erkläert de Begrëff Profiler am Reaktioun

Profiler ass e React Tool dat hëlleft eng App ze optimiséieren andeems Dir moosst wéi vill Mol eng Applikatioun rendert a wéi laang et dauert fir all Komponent ze renderen. Dëst hëlleft den Entwéckler Deeler vun der Applikatioun z'identifizéieren déi Optimisatioun brauchen.

47. Erkläert de Begrëff Kontext am Reaktioun

Kontext ass eng Method fir Daten tëscht React Komponenten op ville Niveauen ze passéieren ouni d'Donnéeën duerch all Nestingniveau mat Requisiten ze passéieren. Et ass am beschten benotzt fir einfach Datenaustausch mat ville Komponenten déi keng konstant Updates brauchen, sou wéi Themainformatioun a Benotzerdaten. Säin Nodeel ass datt et Komponent Wiederverwendung schwéier ka maachen.

48. Erkläert de Begrëff Opriichte am Reaktioun

Montéierung am React ass de Prozess fir e Komponent als Node un den DOM ze befestigen. Un-Montage ass de Géigendeel.

49. Erkläert de Begrëff Rendering am Reaktioun

Rendering ass de Prozess fir e Komponent ze zéien. Et geschitt normalerweis wann den Zoustand vun der Komponent ännert an React muss d'UI nei zéien. Wann e Komponent wärend dem Rendering nei gezeechent gëtt, da ginn seng Kannerkomponenten och nei gezeechent.

50. Erkläert de Begrëff Feeler Grenz am Reaktioun

Feeler Grenz bezitt sech op e React Komponent deen d'JavaScript Fehler vu senge Kannerkomponenten erfaasst, d'Feeler protokolléiert an e Fallback UI an der Plaz vun den Noden weist, déi erofgefall sinn. Feeler Grenze goufen am React 16 agefouert.

Conclusioun

Mir sinn um Enn vun dëser Lëscht vun den Top 50 Must-Wëssen React Interview Froen erreecht an Dir sollt hoffentlech eng gutt Iddi hunn wat Dir elo kënnt erwaarden.

Dir sollt och bemierken datt näischt d'selwecht bleift an Ären Interview kann all Richtung huelen. Dofir sollt Dir weider studéieren an um neiste Stand bleiwen.