Was bedeutet Reaktionselement?

react element ist der Rückgabewert der Funktion „React.createElement“, also ReactElement; die Struktur von ReactElement ist „const element = {Element $$typeof: REACT_ELEMENT_TYPE,key: key,ref: ref,props: props“. ,_owner: Besitzer, };".

Die Betriebsumgebung dieses Tutorials: Windows 10-System, React16.9.0-Version, Dell G3-Computer.

Was bedeutet Reaktionselement?

React-Quellcode |. ReactElement

Apropos ReactElement: Was ich erwähnen muss, ist die Sprache, die JavaScript (JS) in React ersetzt, JSX.

JSX

Als offiziell festgelegte Syntax von React ermöglicht JSX Benutzern das Einfügen von HTML-Code in JS-Code. Allerdings kann diese Schreibweise vom Browser nicht geparst werden. Sie benötigen einen Konverter, und Babel spielt eine solche Rolle. Er konvertiert den JSX-Code beim Kompilieren in eine JS-Datei, damit der Browser ihn analysieren kann.

Wie man konvertiert? Wir wissen, dass JSX zwei Schreibmethoden hat: JS und HTMl. Wenn es in JS geschrieben ist, kann man das natürlich nicht unbedingt sagen Aus Kompatibilitätsgründen wurde die Syntax in eine niedrigere Version übersetzt. Dieser Teil geht über den Rahmen der Diskussion hinaus. Worauf wir achten müssen, ist tatsächlich die Art und Weise, wie HTML verarbeitet wird.

Zum Beispiel die folgende Codezeile:

<div id=&#39;name&#39;>Tom and Jerry</div>

Der nach der Konvertierung von Babel generierte Code lautet:

React.createElement("div", {
    id: "name"}, "Tom and Jerry");

HTML-Syntax wird in JS-Syntax konvertiert. Vereinfacht ausgedrückt wird das von uns geschriebene JSX schließlich zu JS .

Schreiben wir ein komplizierteres Beispiel:

<div class=&#39;wrapper&#39; id=&#39;id_wrapper&#39;>
    <span>Tom</span>
    <span>Jerry</span></div>React.createElement("div", {
    class: "wrapper",
    id: "id_wrapper"
}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

Die Konvertierungsregel ist relativ einfach. Der erste Parameter von React.createElement ist der Knotentyp; der zweite Parameter ist das Attribut des Knotens in Form von Schlüssel: Wert Als Objekt sind alle nachfolgenden Parameter untergeordnete Knoten dieses Knotens.

Es ist zu beachten, dass wir in der JSX-Syntax nicht nur native HTML-Knoten haben, sondern auch eine große Anzahl benutzerdefinierter Komponenten, wie zum Beispiel:

function Comp() {
    return '<div>Tom and Jerry</div>'
}

<Comp></Comp>
function Comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement(Comp, null);

Es ist ersichtlich, dass der erste Parameter von React.createElement zu A wird Versuchen Sie anstelle einer Zeichenfolge, den ersten Buchstaben der Funktion Comp in Kleinbuchstaben zu schreiben:

function comp() {
    return '<div>Tom and Jerry</div>'
}

<comp></comp>
function comp() {
    return '<div>Tom and Jerry</div>';
}

React.createElement("comp", null);

Der erste Parameter von React.createElement wird wieder zu einer Zeichenfolge.
Aus diesem Grund müssen wir beim Schreiben von Komponenten in React den ersten Buchstaben großschreiben. Beim Kompilieren behandelt Babel Komponenten mit kleinen Anfangsbuchstaben als native HTML-Knoten für die Verarbeitung Wenn die Buchstaben klein geschrieben werden, können nachfolgende Programme diese Komponente nicht erkennen und melden möglicherweise einen Fehler.

ReactElement

Die Funktion React.createElement kommt häufig im von Babel kompilierten JS-Code vor. Der Rückgabewert dieser Funktion ist ReactElement. Wie aus dem obigen Beispiel ersichtlich ist, verfügt die Funktion React.createElement über drei Eingabeparameter bzw. drei Kategorien.

• Typ
  Typ bezieht sich auf den Typ dieses ReactElements.
  

• Strings wie div, p stellen das native DOM dar, genannt HostComponent

• Der Klassentyp ist die Komponente, die wir von Component oder PureComponent erben, genannt ClassComponent

• Die Methode ist funktionale Komponente

• Die nativ bereitgestellten Fragmente, AsyncMode usw. sind Symbole und werden speziell verarbeitet.

• config
  Unter Bezugnahme auf den oben von Babel kompilierten Code werden die Attribute aller Knoten in die Konfiguration eingefügt in Form von Key:Value im Objekt.
  

• children
  Es wird mehr als einen untergeordneten Knoten geben, also gibt es nicht nur ein untergeordnetes Element. Alle Parameter ab dem zweiten Parameter sind untergeordnete Elemente, die ein Array darstellen.
  

Die Struktur von ReactElement ist wie folgt:

const element = {
    // This tag allows us to uniquely identify this as a React Element    $$typeof: REACT_ELEMENT_TYPE,

    // 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,
  };

Es ist ein einfaches Objekt. Um die Erstellungsregeln dieses Objekts klar zu sehen, nehmen wir ein Beispiel. Das erste ist das JSX, das wir geschrieben haben:

<div class=&#39;class_name&#39; id=&#39;id_name&#39; key=&#39;key_name&#39; ref=&#39;ref_name&#39;>
    <span>Tom</span>
    <span>Jerry</span>
</div>

Es wird von Babel kompiliert in:

React.createElement("div", {
    class: "class_name",
    id: "id_name",
    key: "key_name",
    ref: "ref_name"}, React.createElement("span", null, "Tom"), React.createElement("span", null, "Jerry"));

Es wird ein solches Element generieren

{
    $$typeof: REACT_ELEMENT_TYPE,
    type：'div'，
    key: 'key_name',
    ref: "ref_name",
    props: {
        class: "class_name",
        id: "id_name",
        children: [
            React.createElement("span", null, "Tom"),
            React.createElement("span", null, "Jerry")
        ]
    }
     _owner: ReactCurrentOwner.current,}

• $$typeof ist eine Konstante, alle von React.createElement generierten Elemente haben diesen Wert. Im Allgemeinen hängen Komponenten, die React verwenden, an this.props.children der übergeordneten Komponente, es gibt jedoch Ausnahmen. Wenn Sie beispielsweise eine Modalbox implementieren möchten, müssen Sie die Modalbox in diesem Fall unter dem Body-Knoten bereitstellen , Sie müssen ReactDOM verwenden. Die Funktion „createPortals(child, container)“ ist implementiert. Der von dieser Funktion generierte $$typeof-Wert ist REACT_PORTAL_TYPE.
  

• type bezieht sich auf den Typ dieses ReactElements.
  

• key und ref sind spezielle Konfigurationen, die im Konfigurationsobjekt gefunden werden. Sie werden separat extrahiert und unter ReactElement platziert.
  

• props enthält zwei. Der erste Teil ist die Konfiguration mit entferntem Schlüssel und Verweis, und der zweite Teil ist das untergeordnete Array. Die Mitglieder des Arrays sind ebenfalls über React.createElement generierte Objekte.
  

• _owner ist Fiber in Version 16.7. Fiber ist der Kern der React16+-Version, daher gehen wir vorerst nicht auf Details ein.
  

Durch diesen Artikel haben wir erfahren, dass HTML-Knoten in JSX mit Hilfe von Babel in verschachtelte ReactElement-Objekte konvertiert werden. Diese Informationen sind sehr wichtig für den späteren Aufbau der Baumstruktur der Anwendung und um React zu vermeiden der Plattform durch die Bereitstellung dieser Art von Daten.

Empfohlenes Lernen: „Video-Tutorial reagieren“

Das obige ist der detaillierte Inhalt vonWas bedeutet Reaktionselement?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!