Reagieren Sie auf die wichtigsten Fragen im Vorstellungsgespräch – kontinuierliche Aktualisierung

2. Die Syntax von vue ist relativ einfach und eignet sich für die Erstellung kleiner Projekte, während React eher für die Entwicklung von Web- und nativen Apps geeignet ist und sich auf große Anwendungen konzentriert.

3、Templating vs. JSX

Der größte Unterschied zwischen React und Vue.js besteht darin, wie Vorlagen implementiert werden.

4. Zustandsverwaltung und Objekteigenschaften

reagieren:
Wenn Sie mit React vertraut sind, wissen Sie, dass der Anwendungsstatus ein Schlüsselkonzept ist. Es gibt sogar Frameworks wie Redux, die sich auf die Verwaltung großer Stateful-Objekte spezialisiert haben. Außerdem sind Zustandsdaten in einer React-Anwendung unveränderlich, was bedeutet, dass sie nicht direkt geändert werden können (obwohl dies nicht ganz stimmt). In React müssen Sie die Methode setState() (oder den Hook useState()) verwenden, um alles im lokalen Zustand zu ändern.
vue:
Für Vue.js ist kein lokales Statusobjekt erforderlich, die Daten werden über das Datenattribut im Vue-Objekt verwaltet.
In Vue besteht keine Notwendigkeit, Statusverwaltungsfunktionen wie setState() aufzurufen, da der Datenparameter im Vue-Objekt als Halter für Anwendungsdaten fungiert.
Zum Thema Zustandsverwaltung für Großanwendungen sagte Evan You, der Erfinder von Vue.js, dass diese Lösung für Kleinanwendungen geeignet ist, sich aber nicht auf Großanwendungen skalieren lässt.
In den meisten Fällen reichen die vom Framework selbst bereitgestellten integrierten Zustandsverwaltungsmuster für große Anwendungen nicht aus und es muss eine dedizierte Lösung wie Redux oder Vuex verwendet werden.

5、Build-Tools

In React ist dies Create React App (CRA);
in Vue.js ist es vue-cli.

6. Die letzte Ähnlichkeit (und der letzte Unterschied) zwischen den beiden Frameworks besteht darin, wie sie mit Begleit-Frameworks umgehen.

Sowohl React als auch Vue.js konzentrieren sich nur auf die UI-Ebene und überlassen Funktionen wie Routing und Statusverarbeitung anderen Frameworks.
Der Unterschied zwischen Vue.js und React besteht darin, wie sie sich auf ihre jeweiligen Begleit-Frameworks beziehen.
Das Vue.js-Kernteam pflegt den Vue-Router und das Vue-Framework und stellt sie dem Haupt-Vue unter.
React-router und React-redux werden von Community-Mitgliedern gepflegt und stehen nicht unter dem offiziellen Dach von Facebook/React.

Zweitens das Prinzip des virtuellen DOM? Vorteile und Nachteile?

Prinzip:

1. Virtuelles DOM ist im Wesentlichen ein JavaScript-Objekt, das eine Abstraktion des realen DOM darstellt

2. Wenn sich der Status ändert, notieren Sie den Unterschied zwischen dem neuen Baum und dem alten Baum

3. Aktualisieren Sie abschließend den Unterschied zum echten Dom

Vorteil:

1. Garantieren Sie die untere Leistungsgrenze: Das virtuelle DOM kann den minimalen Unterschied durch Diff ermitteln und dann stapelweise patchen. Obwohl dieser Vorgang nicht so gut ist wie die manuelle Optimierung, ist er viel besser als die Leistung des groben DOM-Betriebs, sodass das virtuelle DOM dies kann Garantieren Sie die untere Leistungsgrenze
ohne DOM manuell bedienen: Der Diff und Patch des virtuellen DOM wird automatisch in einem Update durchgeführt. Wir müssen DOM nicht manuell bedienen, was die Entwicklungseffizienz erheblich verbessert. 2. Plattformübergreifend
: Virtuelles DOM ist im Wesentlichen ein JavaScript-Objekte und DOM hängen stark mit der Plattform zusammen. Im Gegensatz dazu kann virtuelles DOM für plattformübergreifende Vorgänge wie Server-Rendering, mobile Entwicklung usw. praktischer sein.

Mangel:

Extreme Optimierung kann nicht durchgeführt werden: In einigen Anwendungen mit extrem hohen Leistungsanforderungen kann das virtuelle DOM nicht für extreme Optimierung ausgewählt werden. Beispielsweise verwendet VScode den direkten manuellen Betrieb von DOM für extreme Leistungsoptimierung.

3. Was ist der Unterschied zwischen Klassenkomponenten und Funktionskomponenten?

Klassenkomponenten: Zusätzliche Funktionen wie Status- und Lebenszyklus-Hooks können verwendet werden

Funktionskomponente: Wenn die Komponente nur Requisiten empfängt und auf der Seite rendert, handelt es sich um eine zustandslose Komponente, die auch als dumme Komponente oder Anzeigekomponente bezeichnet wird.

Unterschiede:
1. Klassenkomponenten haben diesen, Funktionskomponenten jedoch nicht.
2. Klassenkomponenten haben einen Lebenszyklus, Funktionskomponenten jedoch nicht.
3. Klassenkomponenten haben einen Status, Funktionskomponenten jedoch nicht.

Die Leistung von Funktionskomponenten ist höher als die von Klassenkomponenten, da Klassenkomponenten bei ihrer Verwendung instanziiert werden müssen, während Funktionskomponenten die Funktion direkt ausführen und das Ergebnis zurückgeben können. Um die Leistung zu verbessern, versuchen Sie, Funktionskomponenten zu verwenden.

4. Was machen Refs in React?

Refs bieten eine Möglichkeit, auf DOM-Knoten oder React-Elemente zuzugreifen, die in der Render-Methode erstellt wurden. In einem typischen Datenfluss stellen Requisiten die einzige Möglichkeit für die Interaktion zwischen übergeordneten und untergeordneten Komponenten dar. Um eine untergeordnete Komponente zu ändern, müssen Sie sie mit neuen Vorteilen neu rendern. Für alles gibt es Ausnahmen. In einigen Fällen müssen wir die Nachkommen außerhalb des typischen Datenflusses zwangsweise ändern. Zu diesem Zeitpunkt können Refs verwendet werden.
Wir können der zu verwendenden Komponente ein ref-Attribut hinzufügen. Der Wert dieses Attributs ist eine Rückruffunktion, die als ersten Parameter das zugrunde liegende DOM-Element oder die gemountete Instanz der Komponente empfängt.

class UnControlledForm extends Component {
  handleSubmit = () => {
    console.log("Input Value: ", this.input.value)
  }
  render () {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type='text'
          ref={(input) => this.input = input} />
        <button type='submit'>Submit</button>
      </form>
    )
  }
}

5. Was ist der Unterschied zwischen Staat und Requisiten?

props und state sind einfache JS-Objekte. Obwohl beide Informationen enthalten, die sich auf die gerenderte Ausgabe auswirken, funktionieren sie hinsichtlich der Komponenten unterschiedlich. Das heißt,
1. Zustand ist die Komponente, die Daten selbst verwaltet, ihren eigenen Zustand steuert und variabel ist;
2. Requisiten ist der von außen übergebene Datenparameter, der unveränderlich ist;
3. Diejenigen ohne Zustand werden als zustandslose Komponenten bezeichnet (Funktionskomponenten) und solche mit Status werden als Stateful-Komponenten bezeichnet.
4. Verwenden Sie mehr Requisiten und weniger Status, dh schreiben Sie mehr zustandslose Komponenten (da Klassenkomponenten bei ihrer Verwendung instanziiert werden müssen und Funktionskomponenten direkt ausgeführt werden können Funktion, um das Rückgabeergebnis zu erhalten. Um die Leistung zu verbessern, verwenden Sie so viele Funktionen wie möglich.

6. Was ist eine High-Level-Komponente?

Komponenten höherer Ordnung (HOCs) sind Funktionen, die eine Komponente übernehmen und eine neue Komponente zurückgeben. Komponenten höherer Ordnung sind keine Komponenten, sondern erweiterte Funktionen, die eine Metakomponente eingeben und eine neue erweiterte Komponente zurückgeben können

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC kann verwendet werden für:
1. Code-Wiederverwendung, Logik- und Bootstrap-Abstraktion
2. Rendering-Hijacking
3. Zustandsabstraktion und -manipulation
4. Requisitenverarbeitung

7. Welche Funktion hat es, super im Konstruktor aufzurufen und Requisiten als Parameter zu übergeben? ?

Requisiten übergeben

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props);  // { name: 'sudheer',age: 30 }
  }
}

Es wurden keine Requisiten weitergegeben

class MyComponent extends React.Component {
  constructor(props) {
    super();
    console.log(this.props); // undefined
    // 但是 Props 参数仍然可用
    console.log(props); // Prints { name: 'sudheer',age: 30 }
  }

  render() {
    // 构造函数外部不受影响
    console.log(this.props) // { name: 'sudheer',age: 30 }
  }
}

Das obige Beispiel verdeutlicht einen Punkt. Das Verhalten von Requisiten unterscheidet sich nur innerhalb des Konstruktors, außerhalb des Konstruktors ist es dasselbe.

Achten Sie darauf, was JSX ist.

JSX ist eine Syntaxerweiterung für Javascript. Es ist wie eine Vorlagensprache mit der ganzen Leistungsfähigkeit von Javascript. Es generiert React-Elemente, die im DOM gerendert werden. React empfiehlt die Verwendung von JSX für Komponenten. In JSX kombinieren wir Javascript und HTML und generieren Reaktionselemente, die im DOM gerendert werden können.

Der JSX-Code selbst kann vom Browser nicht gelesen werden und muss mithilfe von Tools wie Babel und Webpack in traditionelles JS konvertiert werden

class MyComponent extends React.Component {
  render() {
    let props = this.props;  
    return (
      <div className="my-component">
      <a href={props.url}>{props.name}</a>
      </div>
    );
  }
}

9. Warum kann der Status nicht direkt aktualisiert werden?

Wenn Sie versuchen, den Status direkt zu aktualisieren, wird die Komponente nicht erneut gerendert.

 // 错误
 This.state.message = 'Hello world';

Sie müssen die Methode setState() verwenden, um den Status zu aktualisieren. Es sendet Aktualisierungen an das Statusobjekt der Komponente. Wenn sich der Status ändert, reagiert die Komponente mit einem erneuten Rendering:

// 正确做法
This.setState({message: ‘Hello World’});

10. Was sind die verschiedenen Phasen im Lebenszyklus der React-Komponente?

1.Initialisierung:

In diesem Stadium ist die Komponente bereit, ihren Anfangszustand und ihre Standardeigenschaften festzulegen.

2.Montage:

Die React-Komponente kann jetzt im Browser-DOM gemountet werden. Diese Phase umfasst die Lebenszyklusmethoden „componentWillMount“ und „componentDidMount“.

3.Aktualisierung:

Während dieser Phase wird die Komponente auf zwei Arten aktualisiert, indem neue Requisiten und Zustände gesendet werden. Diese Phase umfasst die Lebenszyklusmethoden ShouldComponentUpdate , ComponentWillUpdate und ComponentDidUpdate.

4.Demontage:

Zu diesem Zeitpunkt wird die Komponente nicht mehr benötigt und aus dem Browser-DOM entladen. Diese Phase enthält die Lebenszyklusmethode „componentWillUnmount“.
Zusätzlich zu den oben genannten vier häufig verwendeten Lebenszyklen gibt es auch eine Fehlerbehandlungsphase:
Fehlerbehandlung: In dieser Phase tritt ein Fehler auf, unabhängig davon, ob im Rendering-Prozess, in der Lebenszyklusmethode oder im Konstruktor einer Unterkomponente. Diese Komponente wird aufgerufen. Diese Phase enthält die Lebenszyklusmethode „componentDidCatch“.

11. Was ist die Lebenszyklusmethode von React-Komponenten?

ComponentWillMount() – Wird vor dem Rendern ausgeführt, sowohl auf dem Client als auch auf dem Server.

ComponentDidMount() – Wird auf der Clientseite erst nach dem ersten Rendern ausgeführt.

ComponentWillReceiveProps() – Wird aufgerufen, wenn Requisiten vom übergeordneten Element empfangen werden und bevor ein anderer Renderer aufgerufen wird.

ShouldComponentUpdate() – gibt basierend auf bestimmten Bedingungen „true“ oder „false“ zurück. Geben Sie „true“ zurück, wenn Sie die Komponente aktualisieren möchten, andernfalls geben Sie „false“ zurück. Standardmäßig wird false zurückgegeben.

ComponentWillUpdate() – Wird vor dem Rendern im DOM aufgerufen.

ComponentDidUpdate() – Wird unmittelbar nach dem Rendern aufgerufen.

ComponentWillUnmount() – Wird aufgerufen, nachdem die Bereitstellung der Komponente aus dem DOM aufgehoben wurde. Wird zum Aufräumen des Speicherplatzes verwendet.

12. Was ist Propellerbohren und wie kann man es vermeiden?

Was es ist: Verschachteln Sie beim Erstellen einer React-Anwendung Komponenten auf mehreren Ebenen, um Daten zu nutzen, die von einer anderen verschachtelten Komponente bereitgestellt werden. Der einfachste Weg besteht darin, eine Stütze Schicht für Schicht von jeder Komponente nach unten zu übertragen, von der Quellkomponente zur tief verschachtelten Komponente, was als Stützenbohrung bezeichnet wird.
Der Hauptnachteil des Propellerbohrens besteht darin, dass Komponenten, die sonst keine Daten benötigen, unnötig komplex und schwierig zu warten werden.
So vermeiden Sie: Verwenden Sie React Context. Durch die Definition von Provider-Komponenten, die Daten bereitstellen, und durch die Möglichkeit, dass verschachtelte Komponenten Kontextdaten über Consumer-Komponenten oder den useContext-Hook verwenden.

13. Was ist Reaktionskontext?

Der Kontext bietet eine Möglichkeit, Daten durch den Komponentenbaum zu leiten, wodurch die Notwendigkeit vermieden wird, Requisitenattribute auf jeder Ebene manuell zu übergeben.

14. Was ist eine reine Funktion?

Eine reine Funktion liefert bei gleichen Argumenten immer das gleiche Ergebnis.

15. Wie funktioniert das Rendern von React, wenn setState aufgerufen wird?

Teilen Sie „Rendern“ in zwei Schritte auf:

1. Virtuelles DOM-Rendering:

Wenn die Render-Methode aufgerufen wird, gibt sie eine neue virtuelle DOM-Struktur für die 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.

2. 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.

16. In welchem Lebenszyklus sollte die Anfrage von React platziert werden?

Die derzeit offiziell empfohlene asynchrone Anfrage erfolgt in ComponentDidmount.

Wenn besondere Anforderungen im Voraus angefragt werden müssen, können diese unter besonderen Umständen auch im Konstrukteur angefragt werden:

17. Ist setState asynchron oder synchron?

Geben Sie zuerst die Antwort: Manchmal verhält es sich asynchron, manchmal verhält es sich synchron

1. setState ist nur bei synthetischen Ereignissen und Hook-Funktionen „asynchron“ und bei nativen Ereignissen und setTimeout synchron.
2. „Asynchron“ von setState bedeutet nicht, dass es intern durch asynchronen Code implementiert wird. Tatsächlich werden der Prozess und der Code selbst synchron ausgeführt. Es ist nur so, dass die Aufrufsequenz synthetischer Ereignisse und Hook-Funktionen vor der Aktualisierung liegt. Dies führt zu nein Die Methode erhält sofort den aktualisierten Wert und bildet den sogenannten „asynchronen“ Wert. Natürlich kann das aktualisierte Ergebnis durch den Rückruf im zweiten Parameter setState (partialState, Rückruf) erhalten werden.
3. Die Batch-Update-Optimierung von setState basiert ebenfalls auf „asynchron“ (synthetische Ereignisse, Hook-Funktionen) und wird in nativen Ereignissen und setTimeout nicht stapelweise aktualisiert. Wenn bei „asynchron“ derselbe Wert mehrmals setState ist, Die Stapelaktualisierungsstrategie von setState überschreibt es und übernimmt die letzte Ausführung. Wenn mehrere unterschiedliche Werte von setState gleichzeitig vorhanden sind, werden diese beim Aktualisieren zusammengeführt und stapelweise aktualisiert.

18. Wie erreicht man die Kommunikation mit React-Komponenten?

Kommunikation zwischen React-Komponenten:

1. Die übergeordnete Komponente kommuniziert mit der untergeordneten Komponente:

Die übergeordnete Komponente kann mit der untergeordneten Komponente kommunizieren, indem sie Requisiten an die untergeordnete Komponente übergibt

2. Die untergeordnete Komponente kommuniziert mit der übergeordneten Komponente:

Durch Requisiten + Rückruf überträgt die übergeordnete Komponente Requisiten zur Kommunikation an die untergeordnete Komponente. Diese Requisiten sind eine Funktion, deren Gültigkeitsbereich die übergeordnete Komponente selbst ist. Die untergeordnete Komponente ruft diese Funktion auf und übergibt die Informationen, als die die untergeordnete Komponente übergeben möchte ein Parameter für die übergeordnete Komponente. im Gültigkeitsbereich

3. Kommunikation der Brother-Komponenten:

Suchen Sie den gemeinsamen übergeordneten Knoten dieser beiden Geschwisterknoten und kombinieren Sie die beiden oben genannten Methoden, um Informationen vom übergeordneten Knoten zur Kommunikation weiterzuleiten

4. Ebenenübergreifende Kommunikation:

Context dient dazu, Daten zu teilen, die „global“ für einen Komponentenbaum sind, wie zum Beispiel der aktuell authentifizierte Benutzer, das Thema oder die bevorzugte Sprache. Es eignet sich perfekt für globale Daten, die sich über mehrere Ebenen erstrecken, um über Context zu kommunizieren

5. Veröffentlichungs- und Abonnementmodus:

Der Herausgeber veröffentlicht das Ereignis, der Abonnent hört sich das Ereignis an und antwortet. Wir können durch die Einführung des Ereignismoduls kommunizieren

6. Globale State-Management-Tools:

Kommunizieren Sie mit globalen Statusverwaltungstools wie Redux oder Mobx, die einen globalen Statuscenter-Store verwalten und je nach Ereignissen neue Status generieren

19. Wie implementiert React die Wiederverwendung von Komponenten/Logik?

Abgesehen von Mixin, das offiziell veraltet ist, gibt es derzeit drei gängige Technologien zur Komponentenabstraktion:

1. Hochwertige Komponenten:

Reverse-Vererbung des Eigenschafts-Proxys

2. Rendering-Attribute

3.React-Hooks

20. Was sind die Vor- und Nachteile von Mixin, Hoc, Render Props und React-Hooks?

Mixin-Fehler:

Es besteht eine implizite Abhängigkeit zwischen der Komponente und dem Mixin (ein Mixin hängt oft von einer bestimmten Methode der Komponente ab, diese Abhängigkeit ist jedoch nicht bekannt, wenn die Komponente definiert wird).
Es kann zu Konflikten zwischen mehreren Mixins kommen (z. B. bei der Definition desselben Statusfelds).
Mixins neigen dazu, mehr Status hinzuzufügen, was die Vorhersagbarkeit der Anwendung verringert (Je mehr Status in Ihrer Anwendung vorhanden ist, desto schwieriger ist es, darüber nachzudenken.), was zu einem dramatischen Anstieg der Komplexität führt
Implizite Abhängigkeiten führen zu undurchsichtigen Abhängigkeiten und der Aufwand für Wartung und Verständnis steigt rapide:
- Es ist schwierig, das Verhalten von Komponenten schnell zu verstehen, und es ist notwendig, alle Erweiterungsverhalten, die von Mixin abhängen, und die Interaktion zwischen ihnen vollständig zu verstehen
- Wagen Sie es nicht, die Methode und das Statusfeld des Preises selbst zu löschen und zu ändern, da es schwierig ist festzustellen, ob ein Mixin davon abhängt
- Mixin ist auch schwer zu warten, da die Mixin-Logik am Ende abgeflacht und zusammengeführt wird und es schwierig ist, die Eingabe und Ausgabe eines Mixins herauszufinden

Vorteile von HOC gegenüber Mixin:

HOC beeinflusst den Zustand der inneren Komponente über die äußere Komponente durch Requisiten. Anstatt seinen Zustand direkt zu ändern, gibt es keinen Konflikt und keine gegenseitige Beeinträchtigung, was den Grad der Kopplung verringert
Im Gegensatz zu Mixins Abflachung + Zusammenführung verfügt HOC über eine natürliche hierarchische Struktur (Komponentenbaumstruktur), die die Komplexität verringert

Nachteile von HOC:

Einschränkung der Skalierbarkeit: HOC kann nicht von außen auf den Status von Unterkomponenten zugreifen, daher können unnötige Aktualisierungen nicht durch ShouldComponentUpdate herausgefiltert werden. React stellt React.PureComponent nach der Unterstützung der ES6-Klasse bereit, um dieses Problem zu lösen
Ref-Übergabeproblem: Ref wird abgeschnitten, und später wird React.forwardRef gelöst, um dieses Problem zu lösen
Wrapper Hell: HOC verfügt möglicherweise über mehrschichtige Verpackungskomponenten, und die mehrschichtige Abstraktion erhöht auch die Komplexität und die Verständniskosten
Namenskonflikt: Wenn die höherwertige Komponente mehrfach verschachtelt ist, kommt es zu einem Konflikt, wenn der Namespace nicht verwendet wird, und dann wird die alte Eigenschaft überschrieben
Unsichtbarkeit: HOC ist gleichbedeutend mit dem Neuverpacken einer Komponente auf der äußeren Schicht der Originalkomponente. Sie wissen nicht einmal, was die äußere Verpackung ist. Es ist eine Black Box für Sie

Vorteile von Render-Requisiten:

Die Mängel des oben genannten HOC können durch Render Props behoben werden

Render Props-Fehler:

Kompliziert zu verwenden: HOC muss nur die Dekorator-Syntax verwenden, normalerweise kann eine Codezeile wiederverwendet werden, Render-Requisiten können nicht so einfach sein
Zu tiefe Verschachtelung: Obwohl Render Props das Problem der mehrschichtigen Verschachtelung von Komponenten beseitigt, wird es in eine Verschachtelung von Funktionsrückrufen umgewandelt

Vorteile von React Hooks:

Prägnant: React Hooks löst das Verschachtelungsproblem von HOC und Render Props prägnanter
Entkopplung: React Hooks können die Benutzeroberfläche einfacher vom Status trennen und eine gründlichere Entkopplung erreichen
Kombination: Hooks können auf andere Hooks verweisen, um neue Hooks zu bilden, und die Kombinationen sind vielfältig
Funktionsfreundlich: React Hooks wurde für Funktionskomponenten entwickelt und löst somit mehrere Hauptprobleme von Klassenkomponenten:
- Dies deutet auf Fehleranfälligkeit hin
- Durch die Aufteilung der Logik in verschiedene Lebenszyklen ist der Code schwer zu verstehen und zu warten
- Die Kosten für die Wiederverwendung von Code sind hoch (Komponenten höherer Ordnung können die Codemenge leicht erhöhen)

React Hooks-Fehler:

Zusätzliche Lernkosten (Verwechslung zwischen Funktionskomponente und Klassenkomponente)
Es gibt Schreibbeschränkungen (kann nicht in Bedingungen und Schleifen erscheinen), und Schreibbeschränkungen erhöhen die Kosten für die Umgestaltung
Es zerstört den Leistungsoptimierungseffekt des flachen Vergleichs von PureComponent und React.memo (um die neuesten Requisiten und den neuesten Status zu erhalten, muss die Ereignisfunktion bei jedem Rendern () neu erstellt werden).
In Abschlussszenarien kann auf alte Zustands- und Requisitenwerte verwiesen werden
Die interne Implementierung ist nicht intuitiv (abhängig von einem veränderlichen globalen Zustand, nicht mehr so „rein“)
React.memo kann ShouldComponentUpdate nicht vollständig ersetzen (da Sie keine Statusänderung erhalten können, sondern nur für Requisitenänderungen).

21. Wie ist der Workflow von Redux?

Speichern:

Sie können sich den Ort, an dem Daten gespeichert werden, als Container vorstellen, und es kann nur einen Speicher für die gesamte Anwendung geben.

Zustand:

Das Store-Objekt enthält alle Daten. Wenn Sie die Daten zu einem bestimmten Zeitpunkt abrufen möchten, müssen Sie einen Snapshot des Stores erstellen. Die Datenerfassung zu diesem Zeitpunkt wird als Status bezeichnet.

Aktion:

Die Änderung des Zustands führt zu einer Änderung der Sichtweise. Benutzer können jedoch nicht auf den Status zugreifen, sondern nur auf die Ansicht. Daher muss die Zustandsänderung durch View verursacht werden. Aktion ist eine von View gesendete Benachrichtigung, die angibt, dass sich der Status ändern soll.

Aktionsersteller:

So viele Arten von Nachrichten View senden möchte, es wird auch so viele Arten von Aktionen geben. Wenn Sie sie alle von Hand schreiben, ist dies sehr mühsam. Daher definieren wir eine Funktion zum Generieren von Aktionen. Diese Funktion heißt Action Creator.

Reduzierer:

Nachdem der Store die Aktion erhalten hat, muss er einen neuen Status angeben, damit sich die Ansicht ändert. Dieser Zustandsberechnungsprozess wird als Reduzierer bezeichnet. Reducer ist eine Funktion, die eine Aktion und den aktuellen Status als Parameter übernimmt und einen neuen Status zurückgibt.

versenden:

Dies ist die einzige Möglichkeit für View, eine Aktion auszuführen.

Dann gehen wir den gesamten Workflow durch:

Zuerst sendet der Benutzer (über die Ansicht) eine Aktion und verwendet die Versandmethode in der Sendemethode.
Dann ruft der Store automatisch den Reducer auf und übergibt zwei Parameter: den aktuellen Status und die empfangene Aktion, und der Reducer gibt einen neuen Status zurück
. Sobald sich der Status ändert, ruft der Store die Überwachungsfunktion auf, um die Ansicht zu aktualisieren.

Bisher ist ein Benutzerinteraktionsprozess abgeschlossen. Es ist ersichtlich, dass die Daten im gesamten Prozess in eine Richtung fließen, was die Übersichtlichkeit des Prozesses gewährleistet.

22. Was sind die Vorteile von Hook?

1. Reduzieren Sie das Risiko der Wiederverwendung der Zustandslogik

Hook und Mixin haben gewisse Ähnlichkeiten in der Verwendung, aber die von Mixin eingeführte Logik und der Status können miteinander überschrieben werden, und mehrere Hooks beeinflussen sich nicht gegenseitig, sodass wir uns nicht auf die Verhinderung und Vermeidung von Logikkonflikten bei der Wiederverwendung konzentrieren müssen. Die Verwendung von HOC ohne Einhaltung der Vereinbarung kann auch zu bestimmten Konflikten führen, z. B. der Abdeckung von Requisiten usw. Durch die Verwendung von Hook können diese Probleme vermieden werden.

2. Vermeiden Sie die Bruthölle

Durch die umfassende Verwendung von HOC ist unser Code sehr tief verschachtelt. Mit HOC können wir eine Wiederverwendung der Flat-State-Logik erreichen und eine große Anzahl von Komponentenverschachtelungen vermeiden.

3. Komponenten verständlicher machen

Wenn wir Klassenkomponenten zum Erstellen unserer Programme verwenden, haben sie jeweils ihren eigenen Status. Durch die Komplexität der Geschäftslogik werden diese Komponenten immer größer, und in jedem Lebenszyklus werden immer mehr Logiken aufgerufen, was die Wartung immer schwieriger macht. Durch die Verwendung von Hook können Sie allgemeine Logik in größerem Umfang extrahieren und eine Komponente in kleinere Funktionen unterteilen, anstatt eine Aufteilung basierend auf Lebenszyklusmethoden zu erzwingen.

4. Verwenden Sie Funktionen anstelle von Klassen

Im Vergleich zu Funktionen erfordert das Schreiben einer Klasse möglicherweise mehr Wissen und mehr Punkte, auf die man achten muss, wie z. B. dieses Zeigen, Bindungsereignisse usw. Außerdem versteht ein Computer eine Klasse schneller als eine Funktion. Mit Hooks können Sie weitere neue Funktionen von React außerhalb von Klassen nutzen.