Reagieren Sie auf die Zusammenfassung des Vorstellungsgesprächs

1. Was ist reagieren?

 React](https://reactjs.org) ist eine JavaScript-Bibliothek, die sich der Erstellung von **Benutzeroberflächen** widmet.

 Reagieren Sie auf  Kernkomponenten
 des Kernkonzepts.  Verstehen Sie Komponenten?  Zusammensetzbar, wiederverwendbar, wartbar, testbar

2. Was sind die Merkmale von React?

● Deklaratives Design: React übernimmt eine Paradigmendeklaration. Entwickler müssen nur den Anzeigeinhalt deklarieren, und React vervollständigt ihn automatisch. ●
Effizient: React minimiert die Interaktion mit DOM durch Simulation von DOM (d. h. virtuellem DOM) .
● Flexibel: React kann funktioniert gut mit bekannten Bibliotheken oder Frameworks.
Komponentisierung: Erstellen Sie Komponenten durch Reagieren, um die Wiederverwendung von Code zu erleichtern. Es kann gut in der Entwicklung großer Projekte angewendet werden und Seitenfunktionen in kleine Module aufteilen. Jedes kleine Modul ist die Komponente ●
Einweg Datenfluss: React ist ein unidirektionaler Datenfluss, und die Daten werden vom übergeordneten Knoten über Requisiten an den untergeordneten Knoten weitergeleitet. Wenn sich die Requisiten des übergeordneten Knotens ändern, rendert React alle untergeordneten Knoten neu

 3. Was ist JSX?

JSX ist eine JavaScript-Syntaxerweiterung, die es uns ermöglicht, HTML-ähnlichen Code in JavaScript zu schreiben. Es ist einer der Kerne von React und wird zur Beschreibung der Struktur und des Stils von UI-Komponenten verwendet.

 4. Welche Arten von Komponenten gibt es in React?

Komponenten in React können in zwei Typen unterteilt werden:

Funktionskomponenten: Verwenden Sie Funktionen, um Komponenten zu definieren.
Klassenkomponenten: Verwenden Sie ES6-Klassen, um Komponenten zu definieren.

 4.1 Nennen Sie einige der Hauptvorteile von React

1. Verbessern Sie die Anwendungsleistung mit virtuellem DOM.
2. JSX erleichtert das Lesen und Schreiben von Code.
3. Es führt Rendering (SSR) sowohl auf der Client- als auch auf der Serverseite durch.
4. Einfache Integration in Frameworks (Angular, Backbone), da es sich nur um eine Ansichtsbibliothek handelt.
5. Mit Tools wie Jest ist es einfach, Unit- und Integrationstests zu schreiben.

 4.2 Einschränkungen der Reaktion

1. React ist nur eine Ansichtsbibliothek, kein vollständiges Framework.
2. Für Anfänger, die neu in der Webentwicklung sind, gibt es eine Lernkurve.
3. Die Integration von React in ein herkömmliches MVC-Framework erfordert einige zusätzliche Konfigurationen.
4. Die Komplexität des Codes nimmt durch das Hinzufügen von Inline-Vorlagen und JSX zu.
5. Zu viele kleine Komponenten führen zu Overengineering oder Templating.

 4.2 Wie modularisiere ich Code in React?

Sie können die Export- und Importattribute verwenden, um Ihren Code zu modularisieren. Sie helfen dabei, Komponenten separat in verschiedene Dateien zu schreiben.

Focus React vs. Vue? / Unterschied zwischen Vue und React? (Dahua, Ali)

1. Die gleichen Punkte:
● Beide unterstützen Server-Rendering
● Beide verfügen über Virtual Dom, komponentenbasierte Entwicklung, übertragen Eltern-Kind-Komponentendaten über Requisitenparameter und beide implementieren Webkomponentenspezifikationen ● Beide
sind datengesteuerte Ansichten
● Beide verfügen über Statusverwaltung, React hat Redux, Vue hat Vuex
● Es gibt Lösungen, die Native unterstützen. React hat React Native Vue hat Weex.
2. Unterschiede:
● React ist ausschließlich für die Ansichtsebene von MVC und Vue ist der MVVM-Modus
● Die Template-Rendering-Methode ist anders
○ Die Syntax der Vorlage ist anders und React wird über jsx gerendert, Vue wird über eine erweiterte HTML-Syntax gerendert.
○ Das Prinzip der Vorlage ist anders: React implementiert die allgemeine Syntax in der Vorlage durch natives JS im Komponenten-JS-Code, wie z. B. Interpolation, Bedingungen, Schleifen usw., die alle durch die JS-Syntax realisiert werden, die reiner und reiner ist einheimisch. Vue wird durch Anweisungen in einer separaten Vorlage implementiert, die vom Komponenten-JS-Code getrennt ist. Bedingte Anweisungen erfordern beispielsweise v-if, um dies zu erreichen.
● Der virtuelle Dom ist anders, Vue verfolgt die Abhängigkeiten jeder Komponente und es ist nicht erforderlich, den gesamten Dom-Komponentenbaum neu zu rendern, aber die Reaktion ist anders: Wenn sich der Status der Anwendung ändert, werden alle Komponenten neu gerendert -gerendert, daher wird die Lebensdauer von ShouldcomponentUpdate in React verwendet. Periodische Hook-Funktion zur Steuerung.
● Das Schreiben von Komponenten ist unterschiedlich, React ist jsx und der Inline-Stil, das heißt, alle HTML- und CSS-Dateien werden in js geschrieben, Vue ist HTML, CSS, js in derselben Datei ● Die Datenbindung ist unterschiedlich,
Vue realisiert eine bidirektionale Datenbindung, der Reaktionsdatenfluss ist einseitig
● In React muss das Statusobjekt die Setstate-Methode verwenden, um den Status zu aktualisieren. In Vue ist das Statusobjekt nicht erforderlich und die Daten werden über das Datenattribut im Vue-Objekt verwaltet

Anwendbare Szenarien für Vue und React? / vue, reagiere auf die Technologieauswahl?

● Wenn die Anwendung so klein und schnell wie möglich sein muss, verwenden Sie Vue. Die Rendering-Geschwindigkeit von Vue ist schneller als die von React.
● Für große Projekte wird die Verwendung von React empfohlen, da die Verwendung von Vue-Vorlagen nicht einfach ist Es ist nicht einfach, Fehler zu finden, und es ist nicht einfach, es aufzuteilen und zu testen.
● Wenn es für Web- und native Apps geeignet ist, verwenden Sie für Projekte React Native

Der Unterschied und die Verbindung zwischen Vue und React?

Vorlagenrendering von Vue und React, virtueller Dom zwischen den beiden, Diff-Unterschied (vue2, vue3, React16), Stapelaktualisierung der beiden, Routing-Unterschied, gängige Optimierungsmethoden, Datenkommunikation und einige neue Inhalte: Was sind die Merkmale? von vue3, und schließlich sprechen wir über die aktuelle Ökologie der beiden. . .

5. Was sind Requisiten?

Requisiten sind Eigenschaften, die an Komponenten in React übergeben werden. Sie sind schreibgeschützt und können nicht innerhalb der Komponente geändert werden. Stellen Sie sich Requisiten als Konfiguration für eine Komponente vor. ist eine Möglichkeit, Werte zu übergeben

6. Was ist Staat?

state ist ein Objekt, das in React zum Speichern des internen Status einer Komponente verwendet wird. Sie sind veränderlich und können innerhalb der Komponente geändert werden. Wenn sich der Status ändert, wird die Komponente erneut gerendert. Zustandsverwaltungstool

7. Was sind Lebenszyklusmethoden?

Lebenszyklusmethoden sind ein spezieller Satz von Methoden in React, die während des Lebenszyklus einer Komponente aufgerufen werden. Mit diesen Methoden können wir bestimmte Aktionen in verschiedenen Phasen der Komponente ausführen, z. B. die Komponente initialisieren, die Komponente aktualisieren, die Komponente aushängen usw.

8. Was sind die Lebenszyklusmethoden in React?

Es gibt drei Lebenszyklusphasen in React:

Mount-Phase: Komponenten werden erstellt und dem DOM hinzugefügt.
Aktualisierungsphase: Wenn sich die Requisiten oder der Status der Komponente ändern, wird die Komponente neu gerendert.
Unmount-Phase: Die Komponente wird aus dem DOM entfernt.
Unter diesen Phasen bietet React die folgenden Lebenszyklusmethoden:

Konstruktor()
statisch getDerivedStateFromProps()
render()
KomponenteDidMount()
sollteComponentUpdate()
getSnapshotBeforeUpdate()
KomponenteDidUpdate()
KomponenteWillUnmount()

9. Was ist die Konstruktor()-Methode?

Die Methode „constructor()“ ist der Konstruktor der React-Komponente. Es wird beim Erstellen der Komponente aufgerufen und kann zum Initialisieren des Status und der gebundenen Methoden der Komponente verwendet werden.

10. Was ist die render()-Methode?

Die render()-Methode ist eine der Kernmethoden der React-Komponenten. Es gibt die virtuelle DOM-Struktur der Komponente zurück und ist für das Rendern der Komponente verantwortlich.

11. Was ist die Methode „componentDidMount()“?

Die Methode „componentDidMount()“ ist eine der Lebenszyklusmethoden von React-Komponenten. Es wird aufgerufen, nachdem die Komponente zum DOM hinzugefügt wurde, und kann zum Ausführen einiger Initialisierungsvorgänge verwendet werden, z. B. zum Abrufen von Daten oder zum Hinzufügen von Ereignis-Listenern.

12. Was ist die Methode ShouldComponentUpdate()?

Die Methode ShouldComponentUpdate() ist eine der Lebenszyklusmethoden von React-Komponenten. Es wird aufgerufen, wenn sich die Requisiten oder der Status einer Komponente ändern, und kann verwendet werden, um zu entscheiden, ob die Komponente erneut gerendert werden muss.

13. Was ist die Methode „componentDidUpdate()“?

Die Methode „componentDidUpdate()“ ist eine der Lebenszyklusmethoden von React-Komponenten. Es wird aufgerufen, nachdem sich die Requisiten oder der Status einer Komponente geändert haben, und kann zum Ausführen einiger Aktualisierungsvorgänge verwendet werden, z. B. zum Aktualisieren des DOM oder zum erneuten Abrufen von Daten.

14. Was ist die Methode „componentWillUnmount()“?

Die Methode „componentWillUnmount()“ ist eine der Lebenszyklusmethoden von React-Komponenten. Es wird aufgerufen, bevor die Komponente ausgehängt wird, und kann zum Durchführen einiger Bereinigungsvorgänge verwendet werden, z. B. zum Abbrechen von Ereignis-Listenern oder zum Löschen von Timern.

15. Was ist die setState()-Methode?

Die Methode setState() ist eine der Methoden der React-Komponenten. Es wird verwendet, um den Status der Komponente zu aktualisieren und ein erneutes Rendern der Komponente auszulösen.

16. Was ist React Router? 

React Router ist eine React-Bibliothek zum Erstellen von Single-Page-Anwendungen. Es ermöglicht uns, Routen in der Anwendung zu definieren und verschiedene Komponenten basierend auf URL-Änderungen zu rendern.

17. Aus welchen Komponenten besteht React Router?

Es gibt die folgenden Komponenten in React Router:

BrowserRouter: Wird verwendet, um das Routing des HTML5-Verlaufs in der Anwendung zu aktivieren.
HashRouter: Wird verwendet, um das Hash-Routing in der Anwendung zu aktivieren.
Route: Wird zum Definieren von Routing-Regeln in der Anwendung verwendet.
Schalter: Wird verwendet, um eine von mehreren Routing-Regeln auszuwählen.
Link: Wird verwendet, um zu anderen Seiten in der Anwendung zu navigieren.

18. Was ist Redux?

Redux ist eine JavaScript-Bibliothek zur Verwaltung des Anwendungsstatus. Es handelt sich um eine unidirektionale Datenflussarchitektur, die es uns ermöglicht, den Status der Anwendung besser zu organisieren und zu verwalten. 

19. Was sind die Kernkonzepte in Redux?

Es gibt die folgenden Kernkonzepte in Redux:

Store: Wird zum Verwalten des Status der Anwendung verwendet.
Aktion: Wird zur Beschreibung des aufgetretenen Ereignisses verwendet.
Reduzierer: Wird zum Verarbeiten von Aktionen und zum Aktualisieren des Status verwendet.
Versand: Wird zum Senden einer Aktion an den Reduzierer verwendet.

20. Was ist React Redux?

React Redux ist eine Bibliothek zur Verwendung von Redux in React-Anwendungen. Es bietet einige Helfer, die uns die Verwendung von Redux in React-Komponenten erleichtern.

21. Wie verwende ich Redux in React?

Die Verwendung von Redux mit React erfordert die folgenden Schritte:

Installieren Sie Redux und reagieren Sie auf Redux.
Erstellen Sie einen Redux-Store.
Erstellen Sie einen Reduzierer, um die Aktion zu verarbeiten und den Status zu aktualisieren.
Verwenden Sie die Funktion connect() in einer React-Komponente, um die Komponente mit dem Redux-Store zu verbinden.

22. Was sind React Hooks?

React Hooks sind eine Reihe von Funktionen, die in React 16.8 eingeführt wurden und es uns ermöglichen, Status- und andere React-Funktionen in Funktionskomponenten zu verwenden, ohne Klassenkomponenten zu verwenden.

23. Was sind React Hooks?

React Hooks haben die folgenden Funktionen:

useState()
useEffect()
useContext()
useReducer()
useCallback()
useMemo()
useRef()
useImperativeHandle()
useLayoutEffect()
useDebugValue()

24. Was ist useState()? 

useState() ist eine der am häufigsten verwendeten Funktionen in React Hooks. Es ermöglicht uns, den Zustand in Funktionskomponenten zu verwenden und den Zustand über die gesamte Lebensdauer der Komponente beizubehalten.

25. Was ist useEffect()?

useEffect() ist eine Funktion in React Hooks, die es uns ermöglicht, Nebeneffektoperationen in Funktionskomponenten durchzuführen, wie zum Beispiel das Abrufen von Daten oder das Hinzufügen von Ereignis-Listenern. Es ähnelt einer Kombination der Lebenszyklusmethoden „componentDidMount()“ und „componentDidUpdate()“.

26. Was ist useContext()?

useContext() ist eine Funktion in React Hooks, die es uns ermöglicht, React-Kontext in Funktionskomponenten zu verwenden. Es ermöglicht uns den einfachen Datenaustausch zwischen Komponenten.

27. Was ist useReducer()?

useReducer() ist eine Funktion in React Hooks, die es uns ermöglicht, Reduzierer im Redux-Stil in Funktionskomponenten zu verwenden, um den Zustand zu verwalten. Dadurch können wir den Zustand unserer Komponenten besser organisieren und verwalten.

28. Was ist useCallback()?

useCallback() ist eine Funktion in React Hooks, die es uns ermöglicht, Callback-Funktionen in Funktionskomponenten zwischenzuspeichern, um zu vermeiden, dass sie bei jedem Rendern neu erstellt werden. Dadurch kann die Leistung der Komponente verbessert werden.

29. Was ist useMemo()?

useMemo() ist eine Funktion in React Hooks, die es uns ermöglicht, Berechnungsergebnisse in Funktionskomponenten zwischenzuspeichern, um zu vermeiden, dass sie bei jedem Rendern neu berechnet werden. Dadurch kann die Leistung der Komponente verbessert werden.

30. Was ist useRef()?

useRef() ist eine Funktion in React Hooks, die es uns ermöglicht, eine veränderliche Referenz in Funktionskomponenten zu erstellen. Es kann verwendet werden, um den Status der Komponente zu speichern oder um auf DOM-Elemente zu verweisen.

Was sind kontrollierte und unkontrollierte Komponenten?

Lassen Sie uns ein wenig verstehen, was kontrollierte Komponenten und unkontrollierte Komponenten sind:

Kontrollierte Komponenten: Komponenten, die Daten oder Status nur über React ändern können, sind kontrollierte Komponenten;
unkontrollierte Komponenten: Im Gegensatz zu kontrollierten Komponenten wie Eingabe, Textbereich, Auswahl, Kontrollkästchen und anderen Komponenten kann das Steuerelement selbst Daten- und Statusänderungen sowie React steuern weiß nichts von diesen Änderungen;
wie wandelt man also eine unkontrollierte Komponente in eine kontrollierte Komponente um? Das heißt, die oben genannten reinen HTML-Komponentendaten oder Zustandsänderungen zur Ausführung an React zu übergeben:

const App = () => {   const [value, setValue] = useState('');   const [checked, setChecked] = useState(false);   return (     <>       <input value={value} onInput={event => setValue(event.target.value)} />       <input type="checkbox" reviewed={checked} onChange={event => setChecked(event.target.checked)} /> </ >     )   ; }; im oben genannten Code: Die Änderungen des Eingabefelds und des Kontrollkästchens werden alle von React gesteuert, und React kann erkennen, wann sich die Daten ändern.


 

Warum Hook in React verwenden?

Es ist schwierig, die Zustandslogik zwischen Komponenten wiederzuverwenden: In Klassenkomponenten sind möglicherweise Render-Requisiten und Komponenten höherer Ordnung erforderlich, es bildet sich jedoch ein „verschachtelter Bereich“, und mithilfe von Hook kann die Zustandslogik aus Komponenten extrahiert werden Logiken können separat getestet und wiederverwendet werden;
komplexe Komponenten werden schwer zu verstehen: In Klassenkomponenten enthält jeder Lebenszyklus oft eine nicht verwandte Logik. Beispielsweise müssen unterschiedliche Ausführungslogiken in ComponentDidMount ausgeführt und erfasst und dann in ComponentWillUnmount gelöscht werden. In Funktionskomponenten können jedoch unterschiedliche Logiken in verschiedenen Hooks ausgeführt werden, ohne sich gegenseitig zu beeinträchtigen. Unverständliche Klasse: Klassenkomponenten sind voll von verschiedenen
Verwendungsmöglichkeiten B. this.onClick.bind(this), this.state, this.setState() usw. Gleichzeitig kann die Klasse nicht gut komprimiert werden, was dazu führt, dass die Hitze neu geladen wird. Das Laden ist instabil; Hook ermöglicht es Ihnen um mehr React-Funktionen in Nicht-Klassen-Situationen zu verwenden;
 

Nutzungsszenarien von useCallback und useMemo

useCallback und useMemo können zum Zwischenspeichern von Funktionen und Variablen verwendet werden, um die Leistung zu verbessern und Ressourcenverschwendung zu reduzieren. Mit diesen beiden müssen jedoch nicht alle Funktionen und Variablen implementiert werden, und es gibt auch entsprechende Verwendungsszenarien.

Wir wissen, dass useCallback den Funktionskörper zwischenspeichern kann. Wenn sich die Abhängigkeiten nicht ändern, ist der verwendete Funktionskörper in beiden Renderings derselbe. Seine Einsatzszenarien sind:

Wenn Funktionen Abhängigkeiten von anderen Hooks sind (z. B. in useEffect());
Funktionen werden als Requisiten von Komponenten in React.memo() (oder ShouldComponentUpdate) verwendet;
hauptsächlich, um neu generierte Funktionen zu vermeiden, die andere Hooks oder Komponenten verursachen. Eine Aktualisierung ist nicht erforderlich .

useMemo wird verwendet, um das Ergebnis der Funktionsausführung zwischenzuspeichern. Wenn Sie bei jedem Rendern eine komplexe Operation ausführen müssen oder eine Variable vom Ergebnis einer anderen Variablen abhängig sein muss, können Sie useMemo() verwenden.

Der Diff-Prozess von React

React vergleicht nur Knoten auf der aktuellen Ebene, keine Vergleiche zwischen Ebenen. Geben Sie
je nach Knotentyp, z. B. Funktionskomponentenknoten, Klassenkomponentenknoten, gewöhnlichen Faserknoten, Array-Knoten usw., unterschiedliche Verarbeitungsfunktionen ein und vergleichen Sie
zwei Faserknoten Vorher und nachher: ​​Wenn der Typ unterschiedlich ist, verwerfen Sie direkt den alten Faserknoten und erstellen Sie einen neuen Faserknoten. Wenn der Schlüssel unterschiedlich ist, müssen Sie entsprechend der Situation beurteilen. Wenn es sich um ein einzelnes Element handelt, verwerfen Sie es direkt und erstellen Sie es ein neuer Faserknoten; wenn es sich um ein digitales Element handelt, prüfen Sie, ob die Position verschoben wurde, wenn nicht gefunden, erstellen Sie einen neuen Knoten; wenn Schlüssel und Typ gleich sind, dann rekursieren Sie nach unten; wenn es sich um einen einzelnen Faserknoten handelt
, direkt zurückgeben; wenn es sich um einen Faserknoten mit mehreren parallelen Elementen handelt, wird hier eine einseitig verknüpfte Liste erstellt, und dann wird der Kopfzeiger (der Faserknoten am Anfang der verknüpften Liste) zurückgegeben; über das oben
Gesagte Im Diff-Vergleichsprozess können wir auch erkennen, dass React mehr Maßnahmen ergreifen muss, um einen neuen Faserbaum zu erstellen, wenn die Komponente relativ große Änderungen erfährt. Daher sollten wir im Entwicklungsprozess unter dem Gesichtspunkt der Leistungsoptimierung besonderes Augenmerk darauf legen Aufmerksamkeit auf:

Generieren Sie keine große Anzahl von Leapfrog-Operationen für Knoten: Da React nur Knoten auf derselben Ebene vergleicht, wird bei relativ großen Änderungen an einem untergeordneten Knoten an derselben Position nur der vorherige Faserknoten verworfen und der Erstellungsprozess ausgeführt eine neue Faserknotenoperation; React verschiebt den vorherigen Faserknoten nicht an einen anderen Ort; entsprechend werden nach dem Verschieben des vorherigen JSX-Knotens an einen anderen Ort auch weitere Erstellungsvorgänge nach dem Vergleich davor und danach durchgeführt; der Knotenschlüssel wird nicht
geändert B. die Verwendung von Zufallszahlen als Schlüssel der Liste oder das Ändern des div-Tags in ein p-Tag usw., verwerfen direkt den vorherigen Faserknoten und alle untergeordneten Knoten während des Diff-Vergleichsprozesses (auch wenn der untergeordnete Knoten hat keine Änderung) und erstellt dann einen neuen Faserknoten neu;

31. Was ist useImperativeHandle()?
useImperativeHandle() ist eine Funktion in React Hooks, mit der wir den Instanzwert anpassen können, der der übergeordneten Komponente in der Funktionskomponente bereitgestellt wird. Damit lassen sich wiederverwendbare Komponenten erstellen.

32. Was ist useLayoutEffect()?
useLayoutEffect() ist eine Funktion in React Hooks, sie ähnelt useEffect(), wird jedoch synchron vor der DOM-Aktualisierung ausgelöst. Dies kann verwendet werden, um Situationen zu bewältigen, in denen das DOM synchron aktualisiert werden muss.

33. Was ist useDebugValue()?
useDebugValue() ist eine Funktion in React Hooks, die es uns ermöglicht, den Wert benutzerdefinierter Hooks in React-Entwicklungstools zu debuggen.

34. Was ist React Native?
React Native ist eine React-Bibliothek zum Erstellen nativer mobiler Anwendungen. Es ermöglicht uns die Erstellung plattformübergreifender Anwendungen mit JavaScript und React und kann auf iOS und Android ausgeführt werden.

35. Was sind die Kernkomponenten in React Native?
In React Native gibt es die folgenden Kernkomponenten:

Ansicht: Ähnlich dem div-Element in HTML, das zur Aufnahme anderer Komponenten verwendet wird.
Text: Wird zum Anzeigen von Text verwendet.
Bild: Wird zum Anzeigen von Bildern verwendet.
TextInput: Wird verwendet, um den vom Benutzer eingegebenen Text abzurufen.
ScrollView: Wird zum Scrollen von Seiten verwendet.
FlatList: Wird zum Anzeigen der Liste verwendet.
TouchableOpacity: Wird zum Erstellen anklickbarer Elemente verwendet.
36. Was ist React Native CLI?
React Native CLI ist ein Befehlszeilentool für React Native zum Erstellen und Verwalten von React Native-Anwendungen. Es ermöglicht uns, React Native-Anwendungen in unserer lokalen Entwicklungsumgebung zu erstellen und auszuführen.

37. Was ist Expo?
Expo ist eine Plattform für Entwicklungstools und -dienste zum Erstellen von React Native-Anwendungen. Es bietet nützliche Funktionen wie Rapid Prototyping, automatisierte Builds und Releases, Gerätetests und mehr.

38. Was ist React Native Navigation?
React Native Navigation ist eine Bibliothek zur Implementierung der Navigation in React Native-Anwendungen. Es bietet eine Reihe benutzerfreundlicher APIs zum Verwalten des Navigationsstapels einer Anwendung und der Übergänge zwischen Bildschirmen. Es unterstützt mehrere Navigationstypen wie Stapelnavigation, Tab-Navigation und Schubladennavigation und kann in Zustandsverwaltungsbibliotheken wie Redux integriert werden. React Native Navigation bietet außerdem hohe Leistung, flüssige Animationseffekte und die Möglichkeit, Themen anzupassen, sodass Entwickler problemlos schöne, benutzerfreundliche Navigationsoberflächen erstellen können.

Welche verschiedenen Möglichkeiten gibt es, Komponenten in React zu deklarieren? / Welche verschiedenen Möglichkeiten gibt es, Komponenten in React zu erstellen?

1. Es gibt drei Möglichkeiten, Komponenten in React zu deklarieren:
● Zustandslose Funktionskomponenten
○ Es werden reine Anzeigekomponenten erstellt, die nur für die Anzeige gemäß den eingehenden Requisiten verantwortlich sind und keine Zustandsoperationen beinhalten
○ Komponenten werden nicht verwendet Instanziierung, Die allgemeine Rendering-Leistung wird verbessert. Auf dieses Objekt kann nicht zugegriffen werden. Auf die Lebenszyklusmethode kann nicht zugegriffen werden.
ES5-native React.createClass-definierte Komponenten // RFC
○ React.createClass bindet Funktionsmethoden selbst, was zu unnötigem Leistungsaufwand führt und die Leistung erhöht Wahrscheinlichkeit, dass Code veraltet ist.
● Das ES6-Vererbungsformular erweitert die von React.Component definierten Komponenten // RCC
○ Die derzeit dringend empfohlene Methode zum Erstellen zustandsbehafteter Komponenten wird irgendwann das React.createClass-Formular ersetzen; im Vergleich zu React.createClass kann damit eine bessere Code-Wiederverwendung erreicht werden.
2. Unterschiede
1. Der Unterschied zwischen zustandslosen Komponenten und letzteren:
(1) Im Vergleich zu zustandslosen Komponenten erstellen React.createClass und React.Component beide zustandsbehaftete Komponenten, die instanziiert werden sollen. Und können auf die Lebenszyklusmethode der Komponente zugreifen .
2. Der Unterschied zwischen React.createClass und React.Component:
(1) Die Funktion this ist selbstbindend.
● Bei einer von React.createClass erstellten Komponente wird das this jeder Mitgliedsfunktion der Komponente automatisch von React gebunden, und this in der Funktion wird korrekt eingestellt.
● Bei Komponenten, die von React.Component erstellt wurden, binden die Mitgliedsfunktionen dies nicht automatisch, und Entwickler müssen es manuell binden, da sonst das aktuelle Komponenteninstanzobjekt nicht abgerufen werden kann.
(2) Der Komponenteneigenschaftstyp propTypes und seine Standard-Requisiten-Eigenschaft defaultProps sind unterschiedlich konfiguriert.
● Wenn React.createClass eine Komponente erstellt, werden der Eigenschaftstyp der Komponenten-Requisiten und die Standardeigenschaft der Komponente als Eigenschaften der Komponenteninstanz konfiguriert. Dabei wird defaultProps mit der getDefaultProps-Methode konfiguriert, um Standardkomponenteneigenschaften zu erhalten.
● Wenn React.Component diese beiden entsprechenden Informationen beim Erstellen einer Komponente konfiguriert, werden sie als Eigenschaften der Komponentenklasse konfiguriert, nicht als Eigenschaften der Komponenteninstanz, d. sogenannte statische Eigenschaften der Klasse.
(3) Die Konfiguration des Anfangszustandszustands der Komponente ist unterschiedlich.
● Der Zustand der von React.createClass erstellten Komponente besteht darin, den zugehörigen Zustand der Komponente über die getInitialState-Methode zu konfigurieren.
● Der Zustand der von React erstellten Komponente. Die Komponente ist wie die Initialisierungskomponente in den Konstruktoreigenschaften, die gleich deklariert sind.

Wie erstellt man Komponenten in React?
● Benutzerdefinierte Komponente: Funktionskomponente oder zustandslose Komponente, der erste Buchstabe der Komponente wird großgeschrieben.
● Klassenkomponente: Eine Klassenkomponente muss eine Rendermethode implementieren, die ein jsx-Element zurückgeben und den gesamten Inhalt mit einem äußeren Element umschließen muss

Wie verstehen Sie den Satz „In React ist alles eine Komponente“?

Was ist der Unterschied und die Verbindung zwischen Komponente, Element und Instanz?
● Element: Ein Elementelement ist ein einfaches Objekt, das beschreibt, wie es auf dem Bildschirm für einen DOM-Knoten oder eine andere Komponentenkomponente aussehen soll. Das Elementelement kann andere Elemente in seinen Requisiten enthalten. Das Erstellen eines React-Elements ist kostengünstig. Elemente sind nach ihrer Erstellung unveränderlich.
● Komponente: Eine Komponentenkomponente kann auf viele Arten deklariert werden. Es kann eine Klasse mit einer render()-Methode sein oder einfach als Funktion definiert sein. In beiden Fällen werden Requisiten als Eingabe verwendet und ein Baum von Elementen als Ausgabe zurückgegeben.
● Instanz: Eine Instanzinstanz ist das, worauf Sie mit dem Schlüsselwort this in der von Ihnen geschriebenen Komponentenklasse verweisen (Anmerkung: Komponenteninstanz). Es ist nützlich zum Speichern des lokalen Status und zum Reagieren auf Lebenszyklusereignisse.
Funktionskomponenten haben überhaupt keine Instanzen. Klassenkomponenten (Klassenkomponenten) haben Instanzen, aber Sie müssen nie direkt eine Instanz einer Komponente erstellen, da React dies für uns erledigt.

Wie füge ich Eigenschaften bedingt zu React-Komponenten hinzu?
Bei einigen Eigenschaften ist React intelligent genug, die Eigenschaft wegzulassen, wenn der an sie übergebene Wert ein falscher Wert ist.
var InputComponent = React.createClass({ render: function() { var erforderlich = true; var deaktiviert = false;

return(
  <input type="text" deaktiviert={disabled} erforderlich={erforderlich}>
)
1
2
3
}
})
Rendering-Ergebnis:

Ein anderer möglicher Weg ist:
var condition = true;

var-Komponente = (

Zustandsbehaftete Komponenten, zustandslose Komponenten
Unterscheiden Sie zwischen zustandsbehafteten und zustandslosen Komponenten?
Zustandsbehaftete Komponenten Zustandslose Komponenten
1, speichern Informationen über Komponentenzustandsänderungen im Speicher 1, berechnen den internen Zustand von Komponenten
2, haben das Recht, den Zustand zu ändern 2, haben kein Recht, den Zustand zu ändern
3, enthalten vergangene, gegenwärtige und mögliche zukünftige Zustände Änderungen Fall 3. Beinhaltet keine vergangenen, gegenwärtigen und möglichen zukünftigen Zustandsänderungen. Fall
4. Empfängt Benachrichtigungen über Zustandsänderungsanforderungen von zustandslosen Komponenten und sendet dann Requisiten an diese. 4. Empfängt Requisiten von zustandsbehafteten Komponenten und behandelt sie als Rückruffunktionen

Verständnis und Verwendungsszenarien von zustandsbehafteten und zustandslosen Komponenten
1. Zustandsbehaftete Komponenten
1. Merkmale:
● Es ist eine Klassenkomponente
● Hat Vererbung
● Sie können dies verwenden
● Sie können den Lebenszyklus von React nutzen
● Es wird häufiger verwendet und ist einfach Um den Lebenszyklus häufig auszulösen, wirkt sich die Hook-Funktion auf die Leistung aus.
● Verwenden Sie den Status intern, um seine eigenen Statusänderungen beizubehalten, und zustandsbehaftete Komponenten werden entsprechend den von externen Komponenten übergebenen Requisiten und ihrem eigenen Status gerendert.
2. Nutzungsszenarien:
● Notwendigkeit, den Zustand zu nutzen.
● Es müssen zustandsbehaftete Betriebskomponenten verwendet werden (zustandslose Komponenten können auch neue Versionen von Reaktions-Hooks implementieren)
3. Zusammenfassung:
Klassenkomponenten können ihre eigenen Zustandsvariablen verwalten, dh den Zustand der Komponente, und Klassenkomponenten verfügen auch über unterschiedliche Lebenszyklusmethoden Dies ermöglicht Entwicklern mehr Kontrolle über Komponenten in verschiedenen Phasen der Komponente (Einhängen, Aktualisieren, Aushängen). Klassenkomponenten können sowohl als zustandslose als auch als zustandsbehaftete Komponenten fungieren. Wenn eine Klassenkomponente ihren eigenen Status nicht verwalten muss, kann sie auch als zustandslose Komponente bezeichnet werden.
2. Zustandslose Komponenten
1. Merkmale:
● Hängt nicht vom eigenen Zustand ab
● Kann eine Klassenkomponente oder eine Funktionskomponente sein.
● Das Schlüsselwort this kann vollständig vermieden werden. (Da das Pfeilfunktionsereignis verwendet wird, ist keine Bindung erforderlich.)
● Die Leistung ist höher. Wenn Sie keine Lebenszyklus-Hooks verwenden müssen, sollten Sie zunächst zustandslose Funktionskomponenten verwenden.
● Die Komponente behält den Status innerhalb der Komponente nicht bei und rendert die Komponente nur gemäß den von der externen Komponente übergebenen Requisiten. Wenn sich die Requisiten ändern , die Komponente wird erneut gerendert.
2. Nutzungsszenarien:
● Komponenten müssen den Status nicht verwalten, reine Anzeige
3. Vorteile:
● Vereinfachen Sie den Code, konzentrieren Sie sich auf das Rendern.
● Komponenten müssen nicht instanziiert werden, es gibt keinen Lebenszyklus und sie verbessern die Leistung. Die Ausgabe (Rendering) hängt nur von der Eingabe (Eigenschaft) ab, keine Nebenwirkungen
● Entkopplung und Trennung von Ansichten und Daten
4. Nachteile:
● Ref kann nicht verwendet werden
● Keine Lebenszyklusmethode
● Das erneute Rendern von Komponenten kann nicht gesteuert werden, da die Die Methode ShouldComponentUpdate kann nicht verwendet werden, wenn die Komponente neue Eigenschaften erhält und erneut gerendert wird.
3. Zusammenfassung:
Für Komponenten mit internem Status und ohne externe Beziehung können Statuskomponenten berücksichtigt werden, sodass der Statusbaum nicht zu kompliziert wird und leicht zu verstehen und zu verwalten. Wenn eine Komponente ihren eigenen Status nicht verwalten muss, also eine zustandslose Komponente ist, sollte sie zunächst als Funktionskomponente entworfen werden. Zum Beispiel kundenspezifische und andere Komponenten.

Funktionskomponente, Klassenkomponente
Was sind die Ähnlichkeiten und Unterschiede zwischen Funktionskomponente (Funktionskomponente, auch dumme Komponente, Anzeigekomponente oder Hook-Komponente genannt) und Klassenkomponente (Klassenkomponente)? (Steuerfreunde)
1. Ähnlichkeiten: Beide können Requisiten empfangen und Reaktionselemente zurückgeben
2. Unterschiede:
● Programmierideen: Klassenkomponenten müssen Instanzen erstellen, objektorientiert, Funktionskomponenten müssen keine Instanzen erstellen, Eingaben empfangen, Ausgaben zurückgeben, Funktionale Programmierung
● Speicherbelegung: Beim Klassenaufbau müssen Instanzen erstellt und gespeichert werden, die eine bestimmte Menge an Speicher belegen.
● Werterfassungsfunktion: Funktionskomponenten verfügen über die Funktion der Werterfassung. Die Funktionskomponente kann die gerenderten Werte erfassen (die gerenderten Werte erfassen) und die Daten im Rendering-Abschluss lesen, während die Klassenkomponente sie dadurch liest. in reagieren. Dies ist variabel, sodass Sie immer die neuesten Requisiten erhalten können
● Status: Klassenkomponenten haben ihren eigenen Status, Funktionskomponenten nicht, nur über useState. Die Klasse speichert das vom Statusattribut bereitgestellte Objekt im MemoizedState-Attribut, während die Funktion eine verknüpfte Liste verwendet, um den Status zu speichern, und das MemoizedState-Attribut den Kopfzeiger der verknüpften Liste speichert.
● Lebenszyklus: Klassenkomponenten haben einen vollständigen Lebenszyklus, Funktionskomponenten jedoch nicht. Sie können useEffect verwenden, um einen ähnlichen Lebenszyklus zu erreichen. Testbarkeit: Funktionskomponenten eignen sich zum Testen. Logische Wiederverwendung: Klassenkomponenten erben
Hoc
(Logik-Chaos-Verschachtelung). , und die Kombination ist ausgezeichnet. Für Vererbung, Funktionskomponenten-Hook-Logik wiederverwenden
● Aktualisierung überspringen: ShouldComponentUpdate PureComponent, React.memo
● Zukünftige Entwicklung: Funktionskomponenten werden zum Mainstream, Abschirmung, Spezifikation, Wiederverwendung, geeignet für Zeitscheiben und Rendering

Kontrollierte Komponenten, unkontrollierte Komponenten
Was ist eine kontrollierte Komponente (kontrollierte Komponente)?
​​React ist für die Darstellung der Komponente des Formulars verantwortlich

Was wissen Sie über kontrollierte und unkontrollierte Komponenten? / Was ist eine kontrollierte Komponente? Was sind unkontrollierte Komponenten?
● Die kontrollierte Komponente ist die Komponente im React-Steuerelement und die einzige Wahrheitsquelle für die Formulardaten.
● Bei unkontrollierten Komponenten werden Formulardaten vom DOM verarbeitet, nicht in React-Komponenten.
Obwohl nicht verwaltete Komponenten häufig einfacher zu implementieren sind, da Sie einfach Refs verwenden können, um Werte aus dem DOM abzurufen, wird im Allgemeinen empfohlen, kontrollierte Komponenten gegenüber nicht verwalteten Komponenten zu bevorzugen.
Der Hauptgrund dafür ist, dass die gesteuerte Komponente die Feldvalidierung im laufenden Betrieb unterstützt, das bedingte Deaktivieren/Aktivieren von Schaltflächen ermöglicht und die Eingabeformatierung erzwingt.
Kontrollierte Komponente Unkontrollierte Komponente
1, behält ihren eigenen Status 1 nicht bei, behält ihren eigenen Status
2 bei, Daten werden von der übergeordneten Komponente 2 gesteuert, Daten werden von Dom 3 gesteuert
, erhält den aktuellen Wert über Requisiten und benachrichtigt die Änderung dann durch Rückruf 3, refs, um den aktuellen Wert zu erhalten

Unterscheiden Props zwischen Zustand (State) und Eigenschaften (Props)? / Was ist der Unterschied zwischen (Komponenten-)Status (State) und Props (Props)?
● Props ist ein Parameter, der von außen an die Komponente übergeben wird. Er ist schreibgeschützt. Sobald der Wert zugewiesen wurde, kann er nicht mehr geändert werden Die Unterkomponente kann nur neu gerendert werden, indem aktiv neue Requisiten von der externen Komponente übergeben werden. State Die Anzeigeform
einer Komponente kann durch den Datenstatus und externe Parameter bestimmt werden. Der externe Parameter ist props und die Daten Der Status ist der Zustand. Wenn die Komponente initialisiert wird, verwenden Sie zunächst this.state, um einen Anfangszustand für die Komponente festzulegen. Diese Daten werden zum Rendern der Komponente verwendet, wenn sie zum ersten Mal gerendert wird. Der Zustand unterscheidet sich von Requisiten. und der Status kann geändert werden. Ändern Sie die Statusbedingung durch die Methode this.setState().
Status-Requisiten
erhalten den Anfangswert von der übergeordneten Komponente. Ja, ja,
können den Wert von der übergeordneten Komponente ändern. Nein, ja.
Legen Sie den Standardwert in der Komponente fest. Ja, ja.
Ändern innerhalb der Komponente ja nein
untergeordnete Komponente festlegen Der Anfangswert von ja ja
wird innerhalb der untergeordneten Komponente geändert nein ja

Reine Funktionen
Was ist eine reine Funktion?
Eine reine Funktion ist eine Funktion, die keine Abhängigkeiten aufweist und den Status von Variablen außerhalb ihres Gültigkeitsbereichs nicht ändert. Im Wesentlichen liefern reine Funktionen bei gleichen Argumenten immer das gleiche Ergebnis.

state
Was ist state in React? Wie wird es benutzt?
Der Status ist der Kern der React-Komponenten, die Datenquelle und muss so einfach wie möglich sein. Grundsätzlich handelt es sich bei einem Zustand um ein Objekt, das die Darstellung und das Verhalten einer Komponente bestimmt. Im Gegensatz zu Requisiten sind sie veränderlich und erzeugen dynamische und interaktive Komponenten. Sie können über this.state() aufgerufen werden.

So aktualisieren Sie den Status der Komponente
this.setState(), useState

Wie funktioniert das Rendern von React, wenn setState aufgerufen wird?
Das Rendern kann in zwei Schritte unterteilt werden
: ● Virtuelles DOM-Rendering: Wenn die Render-Methode aufgerufen wird, gibt sie eine neue virtuelle DOM-Struktur der Komponente zurück. Beim Aufruf von setState() wird render erneut aufgerufen, da ShouldComponentUpdate standardmäßig immer true zurückgibt und React daher nicht standardmäßig optimiert ist.
● Natives DOM-Rendering: React ändert nur die realen DOM-Knoten im virtuellen DOM, und die Anzahl der Änderungen ist sehr gering – dies ist eine großartige React-Funktion, die die Änderungen des realen DOM optimiert und React schneller macht.

Was passiert, nachdem setState setState aufgerufen hat?
Nachdem React setstate aufgerufen hat, führt React das eingehende Parameterobjekt und den aktuellen Status der Komponente zusammen, um den Abstimmungsprozess auszulösen.
Während des Abstimmungsprozesses erstellt React den React-Elementbaum und rendert die gesamte UI-Schnittstelle entsprechend dem neuen Status neu , und holen Sie sich den Elementbaum. Danach berechnet React automatisch die Differenz zwischen dem alten und dem neuen Knoten und minimiert das erneute Rendern der Schnittstelle entsprechend der Differenz

Ist setState synchron oder asynchron?
1. setState ist nicht rein synchron/asynchron und seine Leistung variiert je nach Aufrufszenario:
● In React-Hook-Funktionen und synthetischen Ereignissen verhält es sich asynchron;
● Synchron:
○ In DOM-nativen Ereignissen (unter direkter Umgehung der React-Ereignisverarbeitungsfunktion). hinzugefügt von addEventListener)
○ Asynchrone Aufrufe, die von setTimeout/setInterval
2 generiert werden. Dieser Unterschied wird im Wesentlichen durch die Arbeitsweise des React-Transaktionsmechanismus und des Batch-Update-Mechanismus bestimmt: In der Implementierung der setState-Funktion von React wird beurteilt, ob dies aktualisiert werden soll .state direkt oder stellen Sie es entsprechend einer Variablen isBatchingUpdates in die Warteschlange, und isBatchingUpdates ist standardmäßig falsch, was bedeutet, dass setState this.state synchron aktualisiert. Es gibt jedoch eine Funktion batchedUpdates, die isBatchingUpdates ändert, wenn es wahr ist, und wann React ruft diese BatchUpdates auf, bevor die Ereignisverarbeitungsfunktion aufgerufen wird. Die Folge ist, dass der von React gesteuerte Ereignisverarbeitungsprozess setState this.state nicht synchron aktualisiert.

Warum wird empfohlen, dass der an setState übergebene Parameter ein Rückruf und kein Objekt ist
? Da in setstate Requisiten und Status möglicherweise asynchron aktualisiert werden, dh wenn dieselbe Variable verarbeitet wird, werden die Mehrfachverarbeitungen zu einer zusammengefasst. Dies ist eine Stapelverarbeitung; wenn eine Funktion übergeben wird, wird ein Kettenaufruf durchgeführt, und diese Funktion wird durch Reagieren zu einer Ausführungswarteschlange hinzugefügt, und der Code in der Funktion wird sequentiell ausgeführt.

●
Kann useRef beim Rendern in React auf Referenzen zugreifen? Warum?
Nein, das DOM wurde in der Renderphase nicht generiert und kann nicht abgerufen werden. Der Erwerb von DOM muss in der Pre-Commit-Phase und der Commit-Phase erfolgen.

Komponentenkommunikation
Eltern-Kind-Komponentenkommunikation?
● Vorwärtswertübergabe: übergeordnete Komponente -> untergeordnete Komponente
○ Requisiten
● Rückwärtswertübergabe: untergeordnete Komponente -> übergeordnete Komponente
○ Requisiten + Rückruf
● Abonnieren-Veröffentlichung
● Redux

Ebenenübergreifender Komponentenansatz?
● Wert Schicht für Schicht übergeben
○ Elternteil -> Kind -> Enkel..., über Requisiten weitergeben, über Rückruf hochladen
● Ebenenübergreifende Werteübertragung
○ Kontext
● Abonnieren-Veröffentlichen
● Redux

Kommunikationsmethode für Brother-Komponenten?
● Über den gemeinsamen übergeordneten Knoten der Geschwisterknoten leitet der übergeordnete Knoten die Nachricht weiter.
● Browserspeicher: SessionStorage und LocalStorage verwenden.
● Routing-Übertragungswert: Wenn es einen Sprung zwischen zwei Komponenten gibt, können Sie die Routing-Sprungzuweisung verwenden.
● Abonnieren-Veröffentlichung
● Redux

Welche Rolle spielt der Schlüssel in React?

Mithilfe von Schlüsseln kann React erkennen, welche Elemente sich geändert haben, beispielsweise hinzugefügt oder entfernt wurden. Daher sollten Sie jedem Element im Array eine eindeutige Kennung geben.

Wenn die Komponente aktualisiert wird, vergleicht React intern anhand des Schlüssels und des Elementtyps, ob sich das Element geändert hat. Wenn ein Problem mit den als Schlüssel ausgewählten Daten vorliegt, kann es während des Aktualisierungsvorgangs zu einer Ausnahme kommen.