Die meisten Leute, die auf die eine oder andere Weise im Frontend arbeiteten, stießen auf eine Reaktion. Dies ist eine JavaScript-Bibliothek, mit deren Hilfe coole Schnittstellen erstellt werden können. In den letzten Jahren hat sie eine enorme Popularität erlangt. Allerdings wissen nicht viele Leute, wie es im Inneren funktioniert.
In dieser Artikelserie lesen wir den Code und versuchen herauszufinden, wofür die Pakete, die unter der Haube für die Reaktion liegen, verantwortlich sind, wofür sie verwendet werden und wie sie funktionieren. Die grundlegendsten, die wir im Browser verwenden, sind react , react-dom , events und react-reconciler .
Wir werden uns in Ordnung bewegen und heute haben wir einen Artikel über das react . Wen interessiert es, was in diesem Paket enthalten ist - gehen Sie unter die Katze.
Zunächst werden wir ein kleines Beispiel anführen, auf dessen Grundlage wir dieses Paket betrachten werden. Unser Gadget sieht folgendermaßen aus:
function App() { const [text, changeText] = React.useState('Initial'); return ( <div className="app"> <span>{text}</span> <input type="text" value={text} onInput={(e) => changeText(e.target.value)} /> </div> ); } ReactDOM.render( <App />, document.getElementById('root') ) ;
Werfen wir einen kurzen Blick auf diesen Code. Hier sehen wir den Aufruf des React.useState('Initial') über React.useState('Initial') , ein bisschen JSX und den Aufruf der Render-Methode, um all dies auf die Seite zu bringen.
Wie viele wissen, ist dies nicht der endgültige Code, den der Browser verarbeitet. Bevor es ausgeführt wird, wird es beispielsweise mit einem Babel transpiliert. In diesem Fall wird aus dem, was die Funktion zurückgibt, Folgendes:
return React.createElement( "div", { className: "app" }, React.createElement("span", null, text), React.createElement("input", { type: "text", value: text, onInput: function onInput(e) { return changeText(e.target.value); } }) );
Wer möchte experimentieren und sehen, was aus Ihrem Babel- Code wird - Babel Repl .
React.createElement
Wir haben also viele Aufrufe von React.createElement() und Zeit, um zu sehen, was diese Funktion bewirkt. Wir werden es in Worten beschreiben (oder Sie können sich auch die Datei ReactElement.js ansehen ).
Zunächst wird geprüft, ob wir Requisiten haben (im Code heißt das Objekt mit den Requisiten, das wir übergeben haben, config ).
Als nächstes prüfen wir, ob wir key und ref Requisiten haben, die nicht undefined , und speichern sie gegebenenfalls.
if (hasValidKey(config)) { key = '' + config.key; }
Ein interessanter Punkt ist, dass config.key in eine Zeichenfolge config.key wird. config.key bedeutet, dass Sie jeden Datentyp als Schlüssel übergeben können. Hauptsache, es implementiert die .toString() oder .valueOf() und gibt einen Wert zurück, der für eine bestimmte Menge eindeutig ist.
Als nächstes folgen die folgenden Schritte:
- Kopieren Sie die Requisiten, die an das Element übergeben wurden.
- Fügen Sie dort das
children Feld hinzu, wenn wir sie nicht mit Requisiten, sondern als verschachteltes Element übergeben haben. - Wir setzen Standardwerte aus
defaultProps für die Eigenschaften, die wir zuvor nicht definiert haben.
Wenn wir alle Daten vorbereitet haben, rufen wir eine interne Funktion auf, die ein Objekt erstellt, das unsere Komponente beschreibt. Dieses Objekt sieht folgendermaßen aus:
{ // This tag allows us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE, // Symbol // Built-in properties that belong on the element type: type, key: key, ref: ref, props: props, // Record the component responsible for creating this element. _owner: owner, }
Hier haben wir die Eigenschaft $$typeof , die ein Symbol ist. Geben Sie also trotzdem an, welches Objekt fehlschlagen wird.
Die type Eigenschaft speichert den Typ des zu erstellenden Elements. In unserem Beispiel sind dies die App() -Funktion und die Zeilen 'div' , 'span' und 'input' .
Die key enthält denselben Schlüssel, weshalb die Warings zur Konsole fliegen.
Requisiten enthalten, was wir übergeben haben, children und was in defaultProps angegeben wurde. Die Eigenschaft _owner für die korrekte Arbeit mit ref erforderlich.
In unser Beispiel übersetzt React.createElement(App, null) das Ergebnis von React.createElement(App, null) aus:
{ $$typeof: REACT_ELEMENT_TYPE, type: App, key: null, ref: null, props: {}, _owner: null, }
Darüber hinaus haben wir im Dev-Modus ein zusätzliches Feld, in dem ein schöner Stapel mit dem Dateinamen und der Zeile angezeigt wird:
_source: { fileName: "/Users/appleseed/react-example/src/index.js", lineNumber: 7 }
Um ein wenig von dem zusammenzufassen, was wir oben gesehen haben. Das react fungiert als Übersetzer zwischen uns und den übrigen Paketen, die in unserer Anwendung weiterarbeiten, und übersetzt unsere Anrufe in Wörter, die beispielsweise für den Versöhner verständlich sind.
React.useState
In Version 16.8 wurden Hooks angezeigt. Was ist das und wie man es benutzt? Sie können den Link lesen, aber jetzt schauen wir uns an, was im react enthalten ist.
Tatsächlich gibt es nicht viel zu sagen. Ein Paket ist im Wesentlichen eine Fassade, durch die unsere Herausforderungen an interne Einheiten gehen.
useState besteht also nur aus zwei Codezeilen:
export function useState<S>(initialState: (() => S) | S) { const dispatcher = resolveDispatcher(); return dispatcher.useState(initialState); }
Die restlichen Haken sehen fast identisch aus. Hier erhalten wir den aktuellen Dispatcher, der ein Objekt ist und Felder enthält, zum Beispiel useState . Dieser Dispatcher ändert sich abhängig davon, ob wir jetzt das erste Rendering haben oder nur die Komponente aktualisieren möchten.
Die eigentliche Implementierung der Hooks ist im react-reconciler Paket gespeichert, über das wir in einem der folgenden Artikel sprechen werden.
Was weiter
Noch eine Sache. Nachdem Sie diesen Artikel gelesen haben, können Sie verstehen, warum wir das Reaktionspaket immer importieren, auch wenn wir es nicht direkt verwenden. Dies ist notwendig, damit wir nach dem Verdauen unseres jsx durch die Blase eine React Variable haben.
Die Jungs vom Reaktionsteam haben sich darum gekümmert (und nicht nur darum) und arbeiten nun daran, createElement zu ersetzen.
Der Versuch, es auf den Punkt zu bringen: Es besteht der Wunsch, die derzeitige Methode zum Erstellen von Elementen durch zwei zu ersetzen - jsx und jsxs . Dies ist aus mehreren Gründen erforderlich:
- Wir haben oben diskutiert, wie
createElement funktioniert. Es kopiert ständig Requisiten und fügt dem Objekt das children Feld hinzu, in dem die untergeordneten Elemente gespeichert werden, die wir als Argumente an die Funktion übergeben haben (3 Argumente und mehr). Jetzt wird vorgeschlagen, dies in der Phase der Konvertierung von jsx in javascript Aufrufe zu tun, da das Erstellen eines Elements eine häufig aufgerufene Funktion ist und es nicht jedes Mal frei ist, Requisitenänderungen zur Laufzeit durchzuführen. - Sie können den Import des
React Objekts loswerden und nur bestimmte Funktionen import { jsx } from 'react' z. B. import { jsx } from 'react' ) und dementsprechend der Assembly nicht hinzufügen, was wir nicht verwenden. Außerdem müssen Sie das Feld createElement des React Objekts nicht jedes Mal auflösen, da es auch nicht frei ist. - Wir haben oben besprochen, dass wir einen Sonderfall haben, wenn wir den
key aus den Requisiten ziehen und weiterleiten. Nun wird vorgeschlagen, den key in der Transpilierungsphase von jsx zu nehmen und ihn als dritten Parameter an die Elementerstellungsfunktion zu übergeben.
Lesen Sie hier mehr. Das react verfügt bereits über die jsxs jsx und jsxs . Wenn Sie damit enableJSXTransformAPI möchten, können Sie das enableJSXTransformAPI Repository klonen, das Flag enableJSXTransformAPI in der Datei ReactFeatureFlags.js des shared Pakets auf true ReactFeatureFlags.js und Ihre Version des ReactFeatureFlags.js ) mit aktivierter neuer API kompilieren.
Finale
In diesem Zusammenhang werde ich die heutige Geschichte über das react Paket beenden und beim nächsten Mal darüber sprechen, wie das react-dom Paket verwendet, was react erstellt, welche Methoden und wie es implementiert wird.
Vielen Dank für das Lesen bis zum Ende!