Der Inhalt dieses Artikels ist eine Einführung in (Sammlung) häufiger Interviewfragen in React. Er hat einen gewissen Referenzwert. Ich hoffe, er wird für Sie hilfreich sein.
Im Folgenden finden Sie eine Liste häufig verwendeter Interviewfragen zu React:
Ob Sie Interviewer oder Personalvermittler sind, können Sie sich auf die folgenden Fragen beziehen
Stellen Sie sicher, dass Sie
React erstellt ein virtuelles DOM (virtuelles DOM) als Lesezeichen speichern. Wenn sich der Zustand einer Komponente ändert, markiert React zunächst die Änderungen im virtuellen DOM durch den „Diffing“-Algorithmus. Der zweite Schritt ist der Abgleich, und das DOM wird mit den Ergebnissen des Diffs aktualisiert.
Sie können leicht erkennen, wie eine Komponente gerendert wird, indem Sie sich nur die Renderfunktion ansehen.
Durch die Einführung von JSX werden Komponenten erstellt Der Code ist besser lesbar und es ist einfacher, das Layout von Komponenten zu verstehen oder wie Komponenten aufeinander verweisen
Unterstützt serverseitiges Rendering, was SEO und Leistung verbessern kann
Einfach zu testen
React konzentriert sich nur auf die Ansichtsebene und kann daher mit jedem anderen Framework (z. B. Backbone.js, Angular.js) verwendet werden.
Bei Präsentationskomponenten kommt es darauf an, wie die Komponente aussieht. Display akzeptiert speziell Daten und Rückrufe über Requisiten und hat fast nie einen eigenen Status. Wenn die Anzeigekomponente jedoch einen eigenen Status hat, kümmert sie sich normalerweise nur um den UI-Status und nicht um den Status der Daten.
Bei Containerkomponenten geht es mehr um die Funktionsweise der Komponenten. Containerkomponenten stellen Daten und Verhalten für die Präsentationskomponente oder andere Containerkomponenten bereit. Sie rufen Flux actions auf und stellen sie als Rückruf für die Präsentationskomponente bereit. Containerkomponenten sind häufig zustandsbehaftet, da sie Datenquellen (für andere Komponenten) sind.
Mit Klassenkomponenten können Sie nicht nur weitere zusätzliche Funktionen verwenden, z. B. den Zustand der Komponente selbst und Lebenszyklus-Hooks Ermöglichen Sie Komponenten außerdem den direkten Zugriff auf den Speicher und die Aufrechterhaltung des Status.
Wenn eine Komponente nur Requisiten empfängt und die Komponente selbst auf der Seite rendert, handelt es sich bei der Komponente um eine „zustandslose Komponente“. Eine solche Komponente kann mit a erstellt werden reine Funktion. Solche Komponenten werden auch dumme Komponenten oder Anzeigekomponenten genannt
Zustand ist eine Datenstruktur, die für den Standardwert von verwendet wird die bei der Montage der Komponente benötigten Daten. Der Status kann sich im Laufe der Zeit ändern, meistens jedoch aufgrund des Verhaltens von Benutzerereignissen.
Props (Abkürzung für Properties) ist die Konfiguration der Komponente. Requisiten werden von übergeordneten Komponenten an untergeordnete Komponenten weitergegeben, und was untergeordnete Komponenten betrifft, sind Requisiten unveränderlich. Eine Komponente kann ihre eigenen Requisiten nicht ändern, sie kann jedoch die Requisiten ihrer Unterkomponenten zusammenfassen (einheitliche Verwaltung). Auch Requisiten sind nicht nur Daten – Callback-Funktionen können auch über Requisiten übergeben werden.
componentWillMount – wird hauptsächlich für die Anwendungskonfiguration in der Stammkomponente verwendet
componentDidMount – alles kann sein Hier können Sie alle Konfigurationen durchführen, die ohne DOM nicht möglich sind, und alle benötigten Daten abrufen. Wenn Sie die Ereignisüberwachung einrichten müssen, können Sie diese auch hier abschließen
componentWillReceiveProps – Diese periodische Funktion wirkt auf den Status verursacht durch bestimmte Requisitenänderungen. Übergang
shouldComponentUpdate – Wenn Sie befürchten, dass Ihre Komponente zu stark gerendert wird, können Sie mit ShouldComponentUpdate die Leistung verbessern, da dadurch verhindert wird, dass die Komponente erneut gerendert wird, wenn sie neue Requisiten erhält. ShouldComponentUpdate sollte einen booleschen Wert zurückgeben, um zu bestimmen, ob die Komponente erneut gerendert werden soll
componentWillUpdate – wird selten verwendet. Es kann verwendet werden, um die Komponenten „componentWillReceiveProps“ und „shouldComponentUpdate“ der Komponente zu ersetzen (kann jedoch nicht auf die vorherigen Requisiten zugreifen)
componentDidUpdate – wird häufig verwendet, um das DOM als Reaktion auf Requisiten- oder Statusänderungen zu aktualisieren
componentWillUnmount – Hier können Sie die Netzwerkanfrage abbrechen oder alle mit der Komponente verbundenen Ereignis-Listener entfernen
In der React-Komponente sollte die Netzwerkanfrage in ComponentDidMount gestellt werden. Diese Methode wird ausgeführt, wenn die Komponente zum ersten Mal „gemountet“ (zum DOM hinzugefügt) wird und nur einmal im Lebenszyklus der Komponente ausgeführt. Noch wichtiger ist, dass Sie dies nicht garantieren können, bevor die Komponente montiert ist Die Ajax-Anfrage wurde abgeschlossen. Wenn dies der Fall ist, bedeutet dies, dass Sie versuchen, setState für eine nicht gemountete Komponente aufzurufen, was nicht funktioniert. Durch eine Netzwerkanforderung in „componentDidMount“ wird sichergestellt, dass eine Komponente zur Aktualisierung bereit ist.
Formularelemente wie und
Refs können verwendet werden, um einen Verweis auf einen DOM-Knoten oder eine React-Komponente zu erhalten. Gute Beispiele für die Verwendung von Refs sind die Verwaltung von Fokus-/Textauswahl, das Auslösen von Befehlsanimationen oder die Integration in DOM-Bibliotheken von Drittanbietern. Sie sollten die Verwendung von String-Refs und Inline-Ref-Callbacks vermeiden. Refs-Rückrufe werden von React empfohlen.
Eine Komponente höherer Ordnung ist eine Funktion, die eine Komponente als Parameter verwendet und eine neue Komponente zurückgibt. Mit HOC können Sie Code, Logik und Bootstrapping-Abstraktionen wiederverwenden. Die häufigste davon ist wahrscheinlich die Verbindungsfunktion von Redux. Neben der einfachen gemeinsamen Nutzung von Werkzeugbibliotheken und einfacher Komposition besteht die beste Möglichkeit für HOC darin, Verhaltensweisen zwischen React-Komponenten zu teilen. Wenn Sie feststellen, dass Sie an verschiedenen Stellen viel Code geschrieben haben, um dasselbe zu tun, sollten Sie eine Umgestaltung des Codes in ein wiederverwendbares HOC in Betracht ziehen.
Übung
Schreiben Sie ein HOC, das seine Eingabe umkehrt.
Schreiben Sie ein HOC, das der eingehenden Komponente Daten von der API bereitstellt.
Schreiben Sie eine Implementierung von ShouldComponentUpdate HOC, um eine Versöhnung zu vermeiden
Schreiben Sie ein HOC, das die untergeordneten Komponenten der eingehenden Komponente über React.Children.toArray sortiert
Scope-Sicherheit: Vor der Pfeilfunktion hat jede neu erstellte Funktion ihren eigenen Wert (im Konstruktor ist es ein neues Objekt; im strikten Modus ist dieser im Funktionsaufruf undefiniert; wenn die Funktion als „Objektmethode“ bezeichnet wird). ", dann das zugrunde liegende Objekt usw.), Pfeilfunktionen jedoch nicht, es verwendet den this-Wert des umschließenden Ausführungskontexts.
Einfach: Pfeilfunktionen sind leicht zu lesen und zu schreiben
Klar: Wenn alles eine Pfeilfunktion ist, kann jede reguläre Funktion sofort zum Definieren des Umfangs verwendet werden. Entwickler können immer nach nächsthöheren Funktionsanweisungen suchen, um den Wert davon zu erkennen
Weil die Aktualisierungen von this.props und this.state möglicherweise asynchron sind und ihre Werte nicht zuverlässig sind weiter, um den nächsten Zustand zu berechnen.
this im Konstruktor noch eine andere Möglichkeit? Sie können Eigenschaftsinitialisierer verwenden, um Rückrufe korrekt zu binden. create-react -app wird standardmäßig auch unterstützt. In Rückrufen können Sie Pfeilfunktionen verwenden, das Problem besteht jedoch darin, dass jedes Mal, wenn die Komponente gerendert wird, ein neuer Rückruf erstellt wird.
Die Rückgabe von Null in der Rendermethode der Komponente hat keinen Einfluss auf die Lebenszyklusmethode, die die Komponente auslöst
Schlüssel helfen React dabei, zu erkennen, welche Elemente geändert, hinzugefügt oder entfernt wurden. Schlüssel Die Elemente innerhalb des Arrays sollten zugewiesen werden, um dem (DOM)-Element eine stabile Identität zu verleihen. Wählen Sie einen Schlüssel Der beste Ansatz besteht darin, eine Zeichenfolge zu verwenden, die ein Listenelement eindeutig identifiziert. Oft werden Sie IDs in den Daten als Schlüssel verwenden, wenn Sie keine stabilen IDs haben Bei Verwendung mit gerenderten Elementen können Sie den Elementindex als Schlüssel zum Rendern des Elements verwenden. Dies wird jedoch nicht empfohlen, da die Neuanordnung der Elemente zu einer langsameren Neuanordnung führt.
Bevor super() aufgerufen wird, kann die Unterklasse dies nicht verwenden. In ES2015 muss die Unterklasse super() aufrufen. im Konstruktor. Der Grund für die Übergabe von props an super() besteht darin, den Zugriff (in Unterklassen) auf this.props im Konstruktor zu erleichtern.
JSX ist eine Syntaxerweiterung der JavaScript-Syntax und verfügt über alle Funktionen von JavaScript. JSX-Produktionsreaktion „Element“: Sie können jeden JavaScript-Ausdruck in geschweifte Klammern einschließen und in JSX einbetten. Nach Abschluss der Kompilierung wird der JSX-Ausdruck zu einem regulären Ausdruck JavaScript-Objekt, was bedeutet, dass Sie JSX in if-Anweisungen und for-Schleifen verwenden, es einer Variablen zuweisen, es als Argument akzeptieren und von Funktionen zurückgeben können.
Frage:
const element = ( <h1 className="greeting"> Hello, rdhub.cn! </h1> );
Antwort:
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, rdhub.cn!'
);Children
In JSX-Ausdrücken wird der Inhalt zwischen einem öffnenden Tag (z. B. ) und einem schließenden Tag (z. B. ) automatisch als spezielles Attribut an die props.children-Komponenten übergeben, die ihn enthalten.
Für diese Eigenschaft stehen viele Methoden zur Verfügung, einschließlich React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.
Der Zustand ähnelt Requisiten, ist jedoch privat und wird vollständig von der Komponente selbst gesteuert. State ist im Wesentlichen ein Objekt, das Daten enthält und bestimmt, wie die Komponente gerendert wird.
Wenn Sie Webpack- oder Babel-Voreinstellungen konfigurieren möchten.
Die Grundidee von Redux besteht darin, dass der gesamte Anwendungsstatus in einem einzigen Store verwaltet wird. Store ist ein einfaches Javascript Objekt, und die einzige Möglichkeit, den Anwendungsstatus zu ändern, besteht darin, Aktionen in der Anwendung auszulösen und dann Reduzierer zu schreiben, damit diese Aktionen geändert werden Zustand. Die gesamte Zustandsumwandlung erfolgt in Reduzierern und sollte keine Nebenwirkungen haben.
Store ist ein Javascript-Objekt, das den Status der gesamten Anwendung speichert. Gleichzeitig übernimmt Store auch die folgenden Aufgaben:
Zugriff auf den Status über getState() zulassen
Status über „dispatch(action) ausführen“
Zuhörer über „subscribe(“ registrieren) listener)
Erledigen Sie die Abmeldung von Listenern über die von subscribe(listener) zurückgegebene Funktion
Aktionen sind ein reines Javascript-Objekt, sie müssen ein Typattribut haben Zeigt an, dass sie ausgeführt werden. Die Art der Aktion. Im Wesentlichen handelt es sich bei einer Aktion um die Nutzlast, die Daten von der Anwendung an den Store sendet.
Ein Reduzierer ist eine reine Funktion, die den vorherigen Zustand und eine Aktion als Parameter übernimmt und den nächsten Zustand zurückgibt.
Redux Thunk ist eine Middleware, mit der Sie Aktionsersteller schreiben können, die eine Funktion anstelle einer Aktion zurückgeben. Wenn eine bestimmte Bedingung erfüllt ist, kann Thunk verwendet werden, um den Versand einer Aktion (Dispatch) zu verzögern, der den Versand einer asynchronen Aktion (Dispatch) verarbeiten kann.
Eine reine Funktion ist eine Funktion, die nicht vom Zustand von Variablen außerhalb ihres Gültigkeitsbereichs abhängt. Dies bedeutet auch, dass eine reine Funktion dasselbe ist Parameter liefern immer die gleichen Ergebnisse.
Das obige ist der detaillierte Inhalt von(Sammlung) Einführung in häufige Interviewfragen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Standarddrucker festlegen
Verwendung der gettickcount-Funktion
Inländische Plattform für digitale Währungen
Software zum Ausblenden von Taskleistensymbolen
Welche Software ist ig
So schreiben Sie die InsertInto-Anweisung
asp welche Datei
Vorteile des Herunterladens der offiziellen Website der Yiou Exchange App
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
