Die 50 wichtigsten Fragen und Antworten zu React-Interviews

ReactJS-Entwickler sind sehr gefragt und das aus gutem Grund. Aber Sie müssen Ihre Kenntnisse im Rahmen nachweisen, um den Job zu bekommen.

Im Folgenden finden Sie häufig gestellte Fragen zur React-Entwicklung und deren Antworten, die Sie kennen sollten. Es umfasst alles von den Grundlagen bis hin zu fortgeschritteneren Themen.

1. Was ist Reagieren?

React ist ein kostenloses und Open-Source JavaScript-Bibliothek für die Entwicklung von Benutzeroberflächen, die Komponenten verwendet, um Ausgaben für Einzelseitenanwendungen zu erstellen. React wurde von Facebook (Meta) entwickelt und wird von einer Entwickler-Community gepflegt.

2. Listen Sie die wichtigen Funktionen von React auf

Zu den wichtigsten Funktionen von React gehören:

1. Benutzerfreundlichkeit
2. Schnelle Entwicklung
3. Die Verwendung von Komponenten
4. Jsx
5. Das virtuelle DOM
6. Hohe Leistung
7. Einweg-Datenbindung

3. Wo ist das Projekt-Repository von React?

React ist ein Mono-Repository, das lebt https://github.com/facebook/react. Ein Mono-Repository zu sein bedeutet, dass der gesamte Code und andere Quellen zur einfacheren Entwicklung und Verwaltung am selben Ort gespeichert werden.

4. Was ist die aktuelle stabile Version von React?

Die aktuellste stabile Version von React vom 14. Juni 2022 ist 18.2.0.

5. Nennen Sie die Unterschiede zwischen React Native und ReactJS

React und ReactJS sind identisch, während React Native auf React aufbaut. Aufgrund ihrer Unterschiede wird React zum Erstellen dynamischer und reaktionsschneller Benutzeroberflächen für Webanwendungen verwendet, während React Native zum Erstellen von Anwendungen als mobile Apps entwickelt wurde.

6. Was ist der Unterschied zwischen einem Element und einer Komponente?

Ein React-Element ist ein einfaches und unveränderliches Objekt, das erstellt wurde, um einen DOM-Knoten darzustellen. Unveränderlich zu sein bedeutet, dass es nach seiner Erstellung nicht mehr geändert werden kann, da es im DOM gerendert wird. Eine React-Komponente hingegen ist änderbar und erzeugt nach dem Rendern eine JSX-Ausgabe.

7. Wie erstellt man eine Komponente?

Es gibt zwei Möglichkeiten, eine Komponente in React zu erstellen: 1.) Funktionskomponenten und 2.) Klassenkomponenten. Wie der Name schon sagt, wird eine Funktionskomponente mithilfe einer Funktionsdeklaration erstellt, während eine Klassenkomponente mithilfe einer Klassendeklaration erstellt wird.

//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. Listen Sie die 4 Phasen einer Reaktionskomponente auf

Eine React-Komponente durchläuft in ihrem Lebenszyklus die folgenden 4 Phasen:

1. Erstphase – Bauteilkonstruktion im Grundzustand mit initialen Requisiten
2. Montagephase – JSX-Rendering der Komponente
3. Aktualisierungsphase – Statusänderungen von Komponenten und Neuzeichnen von Anwendungen
4. Demontagephase – Entfernen von Komponenten aus dem DOM

9. Erklären Sie, was eine Komponente höherer Ordnung bedeutet

Eine Komponente höherer Ordnung (HOC) ist eine React-Methodik zum Erstellen von Komponenten. Es verwendet eine vorhandene Komponente, um eine neue mit zusätzlicher Funktionalität zu erstellen. Mit anderen Worten, ein HOC ist eine Funktion, die eine Komponente als Argument nimmt und eine neue Komponente mit zusätzlichen Funktionen zurückgibt.

10. Was sind kontrollierte und unkontrollierte Komponenten?

Eine kontrollierte Komponente ist eine React-Komponente, die ihren Wert über Props bezieht und das System über alle Änderungen durch Callbacks benachrichtigt. Es wird von einer übergeordneten Komponente gesteuert, die es verwaltet Zustand und übergibt die Werte als Props an die gesteuerte Komponente. Eine unkontrollierte Komponente hingegen verwaltet ihren Status, und Sie müssen den Status abfragen DOM Verwendung von ref seinen Wert zu bekommen.

11. Was sind Requisiten in React?

Props in React ist nur eine einfache Art, Eigenschaften zu sagen, und damit beziehen Sie sich auf die Eigenschaften einer Komponente. Requisiten werden verwendet, um Daten von einer übergeordneten Komponente an eine oder mehrere untergeordnete Komponenten zu übergeben, und sie sind für die untergeordnete Komponente schreibgeschützt.

12. Was sind Requisiten.Kinder?

Das Attribut Props.children enthält Informationen zu allen Inhalten einer Komponente, die ein öffnendes und ein schließendes Tag hat. Diese untergeordneten Elemente beziehen sich auf alle Elemente, die innerhalb der aktuellen Komponente definiert sind, und können eins, viele oder keine sein.

13. Können Sie Requisiten in React aktualisieren?

Nein, Requisiten in React sind von oben nach unten und unveränderlich. Das bedeutet, dass eine Komponente beliebige Eigenschaften an ihre Kinder senden kann, aber ihre Props nicht aktualisieren kann. Nur sein übergeordnetes Element kann seine Requisiten aktualisieren.

14. Was ist JSX?

JSX steht für JavaScript-XML. Es ist eine JavaScript-Syntaxerweiterung, die es ermöglicht, HTML in Reaktionscode zu schreiben. Der Browser versteht JSX sowieso nicht, also muss React es in lesbaren HTML-Code rendern.

15. Was ist der Unterschied zwischen einer Komponente und einem Element?

Ein Element ist eine zustandslose und unveränderliche Definition eines virtuellen DOM-Knotens. Sie enthält sowohl einen Typ als auch eine Eigenschaft, aber keine Methoden wie eine Komponente. Dieser Mangel an Methoden macht es schnell.

16. Was ist ein Zustand in React?

Ein Status in React bezieht sich auf ein eingebautes Objekt in einer Komponente, das verwendet wird, um Informationen über diese Komponente zu speichern und zu verwalten. Ein Zustand kann sich im Laufe der Zeit ändern und löst somit ein erneutes Rendern dieser Komponente aus. Sie müssen den Zustand in der Konstruktormethode der Komponente definieren, sonst wird die Komponente zustandslos.

17. Was ist eine zustandslose Komponente?

Eine zustandslose React-Komponente hat keinen Zustand. Das bedeutet, dass Sie seinen Zustand auch nicht mit festlegen können this.setState() Methode noch haben sie gerendert. Eine zustandslose Komponente kann jedoch Requisiten haben.

18. Wie aktualisierst du einen Zustand in React

Sie aktualisieren den Zustand einer Komponente, indem Sie sie aufrufen this.setState() Methode.

19. Erkläre den strikten Modus von React

Der strenge Modus von React ist ein Tool, das dem Entwickler hilft, potenzielle Probleme in der Anwendung zu entdecken, indem es tiefer gehende Überprüfungen von Komponenten aktiviert und mehr Warnungen hervorhebt. Der strikte Modus ist nur im Entwicklungsmodus verfügbar.

20. Was bedeutet das Anheben des Zustands in der Reaktion?

Es bedeutet, dass untergeordnete Komponenten einen gemeinsamen Status von ihren übergeordneten Komponenten teilen, da dies die Verwaltung erleichtert, als dass jede untergeordnete Komponente den gemeinsamen Status einzeln verwaltet.

21. Wie übergeben Sie Daten in React?

Sie übergeben Daten in React mithilfe von Props und Callbacks. Die Requisiten von React sind unidirektional, sodass Eigenschaften nur von übergeordneten Komponenten an ihre untergeordneten Komponenten übergeben werden können. Um Daten von einer untergeordneten Komponente an eine übergeordnete Komponente zu übergeben, müssen Sie eine Callback-Funktion verwenden.

22. Definieren Fluss in Reagieren

Flux ist ein unidirektionales Konzept zum Lenken des Datenflusses in einer Anwendung. Unidirektional zu sein bedeutet, dass Daten nur von übergeordneten zu untergeordneten Komponenten übertragen werden können. Flux kann auch mehrere Datenspeicher pro App umfassen.

23. Definieren Redux in Reagieren

Redux ist eine hilfreiche Open-Source-JavaScript-Bibliothek zum Verwalten komplexer Zustände in einer Anwendung. Es ist unabhängig und kann in anderen Frameworks wie Angular verwendet werden. Im Gegensatz zu Flux zentralisiert Redux die Zustandsverwaltung einer Anwendung und erleichtert dadurch das Erstellen komplexer UIs.

24. Wann sollten Sie Redux verwenden?

Nicht alle Apps benötigen Redux. Aber es ist hilfreich bei den folgenden Bedingungen:

1. Wenn Sie große Mengen an Anwendungszuständen in Ihrer App haben
2. Wenn die Logik Ihrer App komplex ist
3. Wenn Ihre App eine große Codebasis hat
4. Wenn Sie die App häufig aktualisieren müssen
5. Wenn viele Leute an der App arbeiten

25. Was ist der Hauptunterschied zwischen Redux und Flux?

Der Hauptunterschied zwischen den beiden besteht darin, dass Redux alle Anwendungsdaten aus einem einzigen Speicher verwaltet, während Sie unter Flux mehrere Speicher haben können.

26. Listen Sie die Komponenten von Redux auf

Es gibt 4 Hauptteile von Redux:

1. Store – Hier hinterlegen Sie den Anwendungsstatus.
2. Action – Dies sind Ereignisse, die dazu führen, dass die App Daten an den Redux-Speicher sendet.
3. Reducer – Dies ist eine Funktion, die den aktuellen App-Status und eine Aktion als Argumente akzeptiert und dann einen neuen Status als Ergebnis zurückgibt.
4. Middleware – Mit dieser Funktion kann ein Entwickler alle Aktionen einer Komponente erfassen, bevor sie die Reduzierfunktion erreichen.

27. Was sind Reaktionshaken?

React-Hooks sind eine Funktion von Funktionskomponenten, mit denen Sie auf verschiedene React-Funktionen zugreifen können, z. B. Zustandsdaten und Rendering-Updates. Es wurde in React 16.8 eingeführt.

28. Listen Sie die Art der Hooks in React auf

Es gibt mehr als 15 Hooks in React, angefangen von den grundlegenden Hooks wie useState, useEffect und useContext bis hin zu zusätzlichen Hooks wie useCallback, useReducer, useMemo, useRef und so weiter.

29. Was sind Fragmente?

Ein React-Fragment ist eine bequeme Möglichkeit, mehrere untergeordnete Elemente in einer Komponente zu gruppieren, ohne sie dem DOM hinzuzufügen. Sie definieren das Tag einfach mit:

<>

or

und laden Sie alle gewünschten untergeordneten Elemente hinein. Der einzige Unterschied besteht darin, dass die Kurzversion <> keine Schlüssel und Attribute akzeptiert, während die Langversion dies tut.

30. Listen Sie die Hauptmethoden des React-Dom-Pakets auf

Sie sind das createPortal() zum Rendern von untergeordneten Elementen in ein externes DOM und das flushSync() zum Leeren von Aktualisierungen. Außerdem gibt es die Methoden render() und hydrate(), die seit React 18 durch createRoot() und hydrateRoot() ersetzt wurden.

31. Was sind Reaktionstasten?

Schlüssel sind eindeutige Bezeichner, die am besten zum Verwalten von Listen verwendet werden. Schlüssel machen es einfach, die einzelnen Elemente in einer Liste zu identifizieren und zu wissen, wann jedes Element aktualisiert, gelöscht oder in irgendeiner Weise geändert wurde.

32. Warum sind Reaktionstasten wichtig?

Schlüssel sind in React wichtig, weil sie beim effizienten Rendern des echten DOM helfen. React ist gut, weil es versucht zu minimieren, welche Komponenten es nach einem Ereignis erneut rendert, und die Verwendung von Schlüsseln auf einer Liste verhindert, dass React ganze Listen erneut rendern muss, was bei großen Listen ein Problem sein kann.

33. Was ist ein Event in React?

Ein Ereignis ist jede Aktion in einer App, die entweder vom Benutzer oder vom System kommt. Ein Ereignis kann von einem Mausklick oder Antippen auf Mobilgeräten bis hin zu einer Fenstergrößenänderung, einem Tastendruck, einem Ziehen, einem Fokus usw. reichen.

34. Erklären Sie was Synthetisches Ereignis Meint

Ein synthetisches Ereignis ist ein Wrapper um die nativen Ereignisse eines Browsers, wobei das Problem darin besteht, dass verschiedene Browser ihre Ereignisse unterschiedlich benennen. React verwendet synthetische Ereignisse, um das Problem zu vermeiden, mehrere Implementierungen und Methoden für all die verschiedenen Browser da draußen erstellen zu müssen. Auf diese Weise verwaltet React gemeinsame Namen für alle verschiedenen Browserereignisse als einheitliche API.

35. Was ist Webpack?

Webpack ist ein Modulbündelungssystem, das zum Kombinieren und Minimieren von JavaScript- und CSS-Dateien verwendet wird. Es basiert auf Node.js und ist hilfreich, wenn Sie mit einer großen Anzahl von Dateien oder Nicht-Code-Assets wie Bildern und Schriftarten arbeiten.

36. Was ist die Create-React-App?

Create-react-app ist ein Tool, mit dem Sie eine Single-Page-React-Anwendung in Ihrer Node.js-Umgebung erstellen können. Es generiert alle Dateien und Ordner, die Sie zum Starten einer Basis-App benötigen, und Sie nehmen sie von dort. Es erfordert Node-Version 14.0.0 aufwärts und npm ab Ver. 5.6.

Die Verwendung ist einfach:

npx create-react-app myNewApp

cd meineNeueApp

npm starten

37. Können Sie serverseitig mit React rendern?

Ja, das ist möglich, allerdings kann es bei großen Projekten ressourcenintensiv werden. Serverseitiges Rendering ist hilfreich, da es die Benutzererfahrung verbessert und SEO. Sie benötigen eine Node.js-Umgebung, einen Bundler wie Webpack und ein Framework wie Next.js und dem Remix um React-Apps zur Laufzeit zu rendern. Eine Lösung für den intensiven Ressourcenverbrauch ist die Verwendung von a statischer Site-Generator, wie zum Beispiel das Next.js-basierte Gatsby.

38. Erklären Sie, was eine Pfeilfunktion tut

Eine Pfeilfunktion ist einfach eine kürzere Art, Funktionen zu definieren. Es ist eine ES6-Kurzschrift, die Folgendes ersetzt:

= Funktion() mit ()=>.

Zum Beispiel:

test = funktion(){

geben Sie „Dies ist ein Test“ zurück;

}

wird dann:

test = () => {

geben Sie „Dies ist ein Test“ zurück;

}

oder für einzeilige Anweisungen:

test = () => „Dies ist ein Test“;

39. Was ist ein Router reagieren?

React Router ist eine Bibliothek, die Routing-Funktionen in einer React-App bereitstellt. Es macht es einfach, reichhaltige Navigationskomponenten einzubinden und zu verwenden, was bei großen oder komplexen Projekten sehr hilfreich sein kann.

40. Was sind die Hauptvorteile der Verwendung von React Router?

Es erstellt verschiedene URL-Pfade für Ihre App und stellt window.location-Werte und ein Verlaufsobjekt bereit.

41. Was ist ComponentWillUnmount()?

Dies ist eine Komponentenmethode, die aufgerufen wird, wenn React im Begriff ist, die Komponente zu zerstören. Es ist ein schöner Ort, um Dinge zu bereinigen, Timer zu löschen, Netzwerkanfragen abzubrechen und andere wichtige Deinitialisierungsprobleme zu behandeln.

42. Was ist der Konstruktor()?

Der Konstruktor ist die Methode der Komponente, die während der Initialisierung der Komponente aufgerufen wird. Es wird normalerweise zum Initialisieren lokaler Zustände und zum Binden von Ereignishandlermethoden verwendet.

43. Was ist virtuelles DOM?

Das virtuelle DOM von React ist eine leichtgewichtige Kopie des DOM des eigentlichen HTML-Dokuments. Es wird zur effizienten Verwaltung und Aktualisierung von Änderungen am realen DOM verwendet.

44. Was sind die Vorteile von Virtual DOM gegenüber Real DOM?

Das virtuelle DOM ist leichtgewichtig und schneller zu rendern als das reale DOM. Dadurch ist es effizienter, zuerst in das virtuelle DOM zu rendern und nur dann Änderungen am realen DOM vorzunehmen, wenn dies erforderlich ist. Jeder Knoten im realen DOM hat eine entsprechende Komponente im virtuellen DOM, und sobald es nach dem Rendern Änderungen an einer virtuellen Komponente gibt, weiß React dann genau, welcher echte HTML-Knoten aktualisiert oder gelöscht werden muss.

45. Erklären Sie den Begriff Versöhnung in Reagieren

Reconciliation ist die Methode von React, das reale DOM nur bei Bedarf zu aktualisieren, indem aktualisierte Versionen des virtuellen DOM durch Vergleichen überprüft und nur die genauen Knoten aktualisiert werden, die sich auf dem realen DOM geändert haben.

46. Erklären Sie den Begriff Profiler in Reagieren

Profiler ist ein React-Tool, das bei der Optimierung einer App hilft, indem es misst, wie oft eine Anwendung gerendert wird und wie lange das Rendern jeder Komponente dauert. Dies hilft dem Entwickler, Teile der Anwendung zu identifizieren, die möglicherweise optimiert werden müssen.

47. Erklären Sie den Begriff Kontext in Reagieren

Kontext ist eine Methode, um Daten zwischen React-Komponenten auf vielen Ebenen zu übergeben, ohne die Daten mithilfe von Requisiten durch jede Verschachtelungsebene leiten zu müssen. Es eignet sich am besten für die einfache gemeinsame Nutzung von Daten mit vielen Komponenten, die keine ständigen Aktualisierungen benötigen, z. B. Themeninformationen und Benutzerdaten. Der Nachteil ist, dass es die Wiederverwendung von Komponenten erschweren kann.

48. Erklären Sie den Begriff Montage in Reagieren

Beim Mounten in React wird eine Komponente als Knoten an das DOM angehängt. Unmounten ist das Gegenteil.

49. Erklären Sie den Begriff Wiedergabe in Reagieren

Rendern ist der Vorgang des Zeichnens einer Komponente. Es tritt normalerweise auf, wenn sich der Status der Komponente ändert und React die Benutzeroberfläche neu zeichnen muss. Wenn eine Komponente während des Renderns neu gezeichnet wird, werden ihre untergeordneten Komponenten ebenfalls neu gezeichnet.

50. Erklären Sie den Begriff Fehlergrenze in Reagieren

Fehlergrenze bezieht sich auf eine React-Komponente, die die JavaScript-Fehler von ihren untergeordneten Komponenten abfängt, die Fehler protokolliert und anstelle der abgestürzten Knoten eine Fallback-Benutzeroberfläche anzeigt. Fehlergrenzen wurden in React 16 eingeführt.

Schlussfolgerung

Wir haben das Ende dieser Liste der 50 wichtigsten React-Interviewfragen erreicht und Sie sollten hoffentlich eine gute Vorstellung davon haben, was Sie jetzt erwarten können.

Außerdem solltest du beachten, dass nichts bleibt wie es ist und dein Vorstellungsgespräch jede Richtung nehmen kann. Deshalb solltest du dich weiterbilden und auf dem Laufenden bleiben.