Antwort: Middle The Die Software bietet einen Plug-in-Modus von Drittanbietern, um den Prozess des Abfangens von Aktionen anzupassen –> Become Action -> Middlewares -> Dieser Mechanismus ermöglicht es uns, den Datenfluss zu ändern und Funktionen wie asynchrone Aktionen, Aktionsfilterung, Protokollausgabe, Ausnahmeberichte usw. zu implementieren.
Gemeinsame Middleware: redux-logger: stellt Protokollausgabe bereit; redux-promise: verarbeitet asynchrone Vorgänge; der Rückgabewert von actionCreator ist Promise
2, Redux What sind die Nachteile
Antwort: 1. Die von einer Komponente benötigten Daten müssen von der übergeordneten Komponente übergeben werden und können nicht wie Flussmittel direkt aus dem Speicher abgerufen werden.
2. Wenn die relevanten Daten einer Komponente aktualisiert werden, wird die übergeordnete Komponente dennoch neu gerendert, auch wenn die übergeordnete Komponente diese nicht verwenden muss, was sich auf die Effizienz auswirken oder komplexe Schreibvorgänge erfordern kann ShouldComponentUpdate zur Beurteilung.
3. Wie werden Reaktionskomponenten in Geschäftskomponenten und technische Komponenten unterteilt?
Antwort: Komponenten werden normalerweise entsprechend ihrer Verantwortlichkeiten in UI-Komponenten und Container-Komponenten unterteilt. UI-Komponenten sind für die UI-Präsentation verantwortlich, und Containerkomponenten sind für die Verwaltung von Daten und Logik verantwortlich. Die beiden werden über die von React-Redux bereitgestellte Verbindungsmethode verbunden.
4. Lebenszyklusfunktion reagieren
Antwort: 1. Initialisierungsphase:
getDefaultProps: Standardeigenschaften der Instanz abrufen
getInitialState: Alle abrufen Instanz-Initialisierungsstatus
componentWillMount: Die Komponente wird gerade geladen und auf der Seite gerendert.
render: Die Komponente generiert hier einen virtuellen DOM-Knoten.
componentDidMount: Die Komponente ist tatsächlich geladen, nachdem es geladen wurde
2. Ausführungsstatus:
componentWillReceiveProps: Wird aufgerufen, wenn die Komponente im Begriff ist, Eigenschaften zu empfangen.
shouldComponentUpdate: Wenn die Komponente neue oder neue Eigenschaften erhält Status (kann false zurückgeben, wird nach dem Empfang von Daten nicht aktualisiert, verhindert den Aufruf von Render und nachfolgende Funktionen werden nicht weiter ausgeführt)
componentWillUpdate: Die Komponente wird gerade aktualisiert und kann Eigenschaften und Status nicht ändern
render: Die Komponente wird neu gerendert
componentDidUpdate: Die Komponente wurde aktualisiert
3. Zerstörungsphase:
componentWillUnmount: Die Komponente ist ungefähr zerstört werden
5. Welche periodische Funktion ist die Optimierung der Reaktionsleistung?
Antwort: ShouldComponentUpdate Diese Methode wird verwendet, um zu bestimmen, ob die Render-Methode aufgerufen werden muss, um den Dom neu zu zeichnen. Da das Rendern von DOM viel Leistung verbraucht, kann die Leistung erheblich verbessert werden, wenn wir einen optimierten DOM-Diff-Algorithmus in die Methode ShouldComponentUpdate schreiben können.
6. Warum verbessert virtueller Dom die Leistung?
Antwort: Virtueller Dom entspricht dem Hinzufügen eines Caches zwischen js und echtem Dom, wobei der Dom-Diff-Algorithmus verwendet wird, um unnötige Dom-Operationen zu vermeiden Leistung.
Die spezifischen Implementierungsschritte sind wie folgt:
1. Verwenden Sie die JavaScript-Objektstruktur, um die Struktur des DOM-Baums darzustellen, und verwenden Sie dann diesen Baum, um einen echten DOM-Baum zu erstellen document;
2. Wenn sich der Status ändert, wird ein neuer Objektbaum erstellt. Vergleichen Sie dann den neuen Baum mit dem alten Baum und notieren Sie die Unterschiede zwischen den beiden Bäumen.
Wenden Sie die in Schritt 2 aufgezeichneten Unterschiede auf den in Schritt 1 erstellten echten DOM-Baum an, und die Ansicht wird aktualisiert.
7. Diff-Algorithmus?
Antwort: 1. Zerlegen Sie die Baumstruktur nach Ebenen und vergleichen Sie nur Elemente auf derselben Ebene.
2. Fügen Sie jeder Einheit der Listenstruktur ein eindeutiges Schlüsselattribut hinzu, um den Vergleich zu erleichtern.
3. React stimmt nur mit Komponenten derselben Klasse überein (die Klasse bezieht sich hier auf den Namen der Komponente)
4 Beim Aufruf der setState-Methode der Komponente , React wird als schmutzig markiert. Am Ende jeder Ereignisschleife überprüft React alle als schmutzig markierten Komponenten und zeichnet sie neu.
6． Selektives Teilbaum-Rendering. Entwickler können ShouldComponentUpdate überschreiben, um die Diff-Leistung zu verbessern.
8. React-Lösung zur Leistungsoptimierung
Antwort: 1) Schreiben Sie ShouldComponentUpdate um, um unnötige DOM-Operationen zu vermeiden.
2) Verwenden Sie die Produktionsversion von React.js.
3) Verwenden Sie die Taste, um React dabei zu helfen, die kleinsten Änderungen aller Unterkomponenten in der Liste zu identifizieren
9 Beschreiben Sie kurz die Idee von Flux
Antwort: Das größte Merkmal von Fluss ist die „Einbahnstraße“ des Datenflusses.
1. Der Benutzer besucht View
2. View gibt die Aktion des Benutzers aus
3. 4 Nachdem .Store aktualisiert wurde, wird ein „Änderungs“-Ereignis gesendet
5. Nach dem Empfang des „Änderungs“-Ereignisses wird die Seite aktualisiert
10 Welche Art von Gerüst wurde verwendet? das React-Projekt? Mern? Yeoman?
Antwort: Mern: MERN ist ein Gerüsttool, das problemlos isomorphe JS-Anwendungen mit Mongo, Express, React und NodeJS generieren kann. Es minimiert die Installationszeit und ermöglicht es Ihnen, bewährte Technologie zu nutzen, um die Entwicklung zu beschleunigen.
11. Kennen Sie React?
Antwort: Ja, React ist eine von Facebook entwickelte, leichte Komponentenbibliothek. Sie wird verwendet, um einige Probleme der Front-End-Ansichtsebene zu lösen, die das Problem der V-Ebene in der internen Instagram-Website darstellt verwendet React.
12. Welche Probleme löst React?
Antwort: Drei Probleme wurden gelöst: 1. Problem mit der Wiederverwendung von Komponenten, 2. Leistungsproblem, 3. Kompatibilitätsproblem:
13.
Antwort: Die Vereinbarung, der React folgt, ist „BSD-Lizenz + Patentierte Open-Source-Vereinbarung“. Diese Vereinbarung ist ziemlich seltsam. Wenn Ihr Produkt nicht mit Facebook konkurriert, können Sie React frei verwenden, aber wenn es Konkurrenz gibt , , Ihre React-Nutzungslizenz wird gekündigt
14 Verstehen Sie, dass ShouldComponentUpdate erfolgen soll?
Antwort: Die virtuelle Dom-Technologie von React erfordert einen ständigen Diff-Vergleich zwischen Dom und virtuellem Dom. Wenn der Dom-Baum groß ist, ist dieser Vergleichsvorgang zeitaufwändiger, daher bietet React eine Patch-Funktion wie ShouldComponentUpdate If Wenn wir bei einigen Änderungen nicht möchten, dass eine Komponente aktualisiert wird oder wenn sie aktualisiert wird und gleich bleibt wie zuvor, können wir diese Funktion verwenden, um React direkt mitzuteilen, wodurch Diff-Operationen überflüssig werden und die Effizienz weiter verbessert wird.
15. Wie funktioniert Reagieren?
Antwort: React erstellt ein virtuelles DOM (virtuelles DOM). 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.
16. Welche Vorteile bietet die Verwendung von React?
Antwort: 1. Es ist leicht zu erkennen, wie eine Komponente gerendert wird, indem man sich nur die Renderfunktion ansieht
2 Die Einführung von JSX macht den Komponentencode besser lesbar und erleichtert das Verständnis des Layouts von Komponenten oder wie Komponenten aufeinander verweisen
3. Unterstützt serverseitiges Rendering, was SEO und Leistung verbessern kann
5. Reagieren konzentriert sich nur auf die Ansichtsebene und kann daher mit jedem anderen Framework (z. B. Backbone.js, Angular.js) verwendet werden
17 Es gibt einen Unterschied zwischen der Präsentationskomponente (Präsentationskomponente) und dem Container Komponente (Containerkomponente) Was ist der Unterschied?
Antwort: 1. Anzeigekomponenten legen Wert darauf, wie die Komponenten aussehen. 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.
2. Bei Containerkomponenten geht es mehr darum, wie Komponenten funktionieren. Containerkomponenten stellen Daten und Verhalten für die Präsentationskomponente oder andere Containerkomponenten bereit. Sie rufen Flux-Aktionen auf und stellen sie als Rückrufe für die Präsentationskomponente bereit. Containerkomponenten sind häufig zustandsbehaftet, da sie Datenquellen (für andere Komponenten) sind
18 Was ist der Unterschied zwischen einer Klassenkomponente und einer Funktionskomponente?
Antwort: 1. Mit Klassenkomponenten können Sie nicht nur weitere zusätzliche Funktionen verwenden, z. B. den eigenen Status und Lebenszyklus-Hooks der Komponente, sondern ermöglichen der Komponente auch den direkten Zugriff auf den Speicher und die Verwaltung des Status
2. Wenn eine Komponente nur Requisiten empfängt und die Komponente selbst auf der Seite rendert, ist die Komponente eine „zustandslose Komponente“ und kann mit einer reinen Funktion erstellt werden. Solche Komponenten werden auch dumme Komponenten oder Präsentationskomponenten genannt
19 Was ist der Unterschied zwischen Zustand (Zustand) und Requisiten (einer Komponente)?
Antwort: 1. State ist eine Datenstruktur, die für den Standardwert der Daten verwendet wird, die beim Mounten der Komponente erforderlich sind. Der Status kann sich im Laufe der Zeit ändern, meistens jedoch aufgrund des Verhaltens von Benutzerereignissen.
2. 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.
20. Wo soll die Ajax-Anfrage in der React-Komponente initiiert werden?
Antwort: In React-Komponenten sollten Netzwerkanfragen in ComponentDidMount initiiert 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 nicht garantieren können, dass die Ajax-Anfrage abgeschlossen ist, bevor die Komponente gemountet wird. 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.
21. Was ist eine kontrollierte Komponente?
Answer; In HTML behalten Formularelemente wie und
22. Welche Rolle spielen Refs in React?
Antwort: Refs können verwendet werden, um eine Referenz 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.
23. Was ist eine Komponente höherer Ordnung?
Antwort: Eine Komponente höherer Ordnung ist eine Funktion, die eine Komponente als Parameter akzeptiert 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.
24. Welche Vorteile bietet die Verwendung von Pfeilfunktionen?
Antwort: 1. Bereichssicherheit: Vor der Pfeilfunktion hat jede neu erstellte Funktion ihren eigenen this-Wert (ein neues Objekt im Konstruktor; im strikten Modus ist der this-Wert im Funktionsaufruf this undefiniert; wenn die Funktion als „Objektmethode“ bezeichnet wird, dann das zugrunde liegende Objekt usw.), Pfeilfunktionen jedoch nicht, verwendet sie den Wert this des umschließenden Ausführungskontexts.
2. Einfach: Pfeilfunktionen sind einfach zu lesen und zu schreiben
3 Klar: Wenn alles eine Pfeilfunktion ist, kann jede reguläre Funktion sofort verwendet werden, um den Bereich zu definieren. Entwickler können immer nach nächsthöheren Funktionsanweisungen suchen, um den Wert von this
25 zu sehen. Warum wird empfohlen, dass der an setState übergebene Parameter ein Callback und kein Objekt ist?
Antwort: Da die Aktualisierungen von this.props und this.state möglicherweise asynchron sind, kann man sich bei der Berechnung des nächsten Status nicht auf ihre Werte verlassen.
26. Gibt es außer der Bindung im Konstruktor noch eine andere Möglichkeit?
Antwort: Sie können Eigenschaftsinitialisierer verwenden, um Rückrufe korrekt zu binden, und create-react-app unterstützt dies standardmäßig auch. 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.
27. Wie kann das Rendern von Komponenten verhindert werden?
Antwort: Die Rückgabe von Null in der Rendermethode der Komponente hat keinen Einfluss auf die Lebenszyklusmethode der ausgelösten Komponente
28 Was ist der Schlüssel beim Rendern einer Liste? Was ist der Zweck des Festlegens des Schlüssels?
Antwort: Mithilfe von Schlüsseln kann React erkennen, welche Elemente geändert, hinzugefügt oder entfernt wurden. Den Elementen innerhalb des Arrays sollten Schlüssel zugewiesen werden, um dem (DOM)-Element eine stabile Identität zu verleihen. Die beste Möglichkeit, einen Schlüssel auszuwählen, 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 für die gerenderten Elemente haben, können Sie den Elementindex als Schlüssel für die gerenderten Elemente verwenden. Diese Methode wird jedoch nicht empfohlen, wenn die Elemente dies können neu angeordnet. Dadurch wird das erneute Rendern langsamer
29. Was ist der Zweck des Aufrufs von super(props) (im Konstruktor)?
Antwort: Unterklassen können dies nicht verwenden, bevor super() aufgerufen wird. In ES2015 müssen Unterklassen super() im Konstruktor aufrufen. Der Grund für die Übergabe von props an super() besteht darin, den Zugriff auf this.props im Konstruktor (in Unterklassen) zu erleichtern.
30. Was ist JSX?
Antwort: JSX ist eine Syntaxerweiterung der JavaScript-Syntax und verfügt über alle Funktionen von JavaScript. JSX erzeugt React-„Elemente“, und Sie können jeden JavaScript-Ausdruck in geschweifte Klammern einschließen und in JSX einbetten. Nach der Kompilierung werden JSX-Ausdrücke zu regulären JavaScript-Objekten, was bedeutet, dass Sie JSX in if-Anweisungen und for-Schleifen verwenden, es Variablen zuweisen, es als Argument akzeptieren und von Funktionen zurückgeben können.
31Was sind Kinder?
Antwort: In JSX-Ausdrücken wird der Inhalt zwischen einem öffnenden Tag (z. B. ) und einem schließenden Tag (z. B. ) automatisch als spezielles Attribut props.children behandelt an die enthaltende Komponente übergeben.
Diese Eigenschaft verfügt über viele Methoden, einschließlich React.Children.map, React.Children.forEach, React.Children.count, React.Children.only, React.Children.toArray.
32. Was ist in React der Zustand?
Antwort: State ä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.
33. Welche Gründe würden Sie dazu veranlassen, sich von der Abhängigkeit von create-react-app zu lösen?
Antwort: Wenn Sie Webpack- oder Babel-Voreinstellungen konfigurieren möchten.
34. Was ist Redux?
Antwort: Die Grundidee von Redux besteht darin, den gesamten Anwendungsstatus in einem einzigen Speicher zu speichern. Der 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 für diese Aktionen zu schreiben, um den Status zu ändern. Die gesamte Zustandstransformation wird in Reduzierern abgeschlossen und sollte keine Nebenwirkungen haben
35 Was ist in Redux ein Geschäft?
Antwort: Store ist ein Javascript-Objekt, das den Status der gesamten Anwendung speichert. Gleichzeitig übernimmt Store auch die folgenden Verantwortlichkeiten:
Erlauben Sie den Zugriff auf den Status über getState()
Führen Sie den Dispatch(action) aus. Ändern Sie den Status
bis subscribe(listener) ) Listener registrieren
Verwenden Sie die von subscribe(listener) zurückgegebene Funktion, um die Notizen der Zuhörer zu verarbeiten
36. Was ist eine Aktion?
Answer; Aktionen sind reine Javascript-Objekte. Sie müssen über ein Typattribut verfügen, das den Typ der ausgeführten Aktion angibt. Im Wesentlichen handelt es sich bei einer Aktion um die Nutzlast, die Daten von der Anwendung an den Store sendet.
37. Was ist ein Reduzierer?
Antwort: Ein Reduzierer ist eine reine Funktion, die den vorherigen Zustand und eine Aktion als Parameter übernimmt und den nächsten Zustand zurückgibt.
38. Welche Funktion hat Redux Thunk?
Antwort: 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.
39. Was ist eine reine Funktion?
Antwort: Eine reine Funktion ist eine Funktion, die nicht von Variablen außerhalb ihres Gültigkeitsbereichs abhängt und deren Zustand nicht ändert. Dies bedeutet auch, dass eine reine Funktion immer das gleiche Ergebnis für die gleichen Parameter zurückgibt.
Das obige ist der detaillierte Inhalt vonEinige häufige Interviewfragen zu React (teilen). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
