Website-Suche

javascript - Unterschied zwischen React-Komponente und React-Element

Was ist der Unterschied zwischen einer React-Komponente und einem React-Element? In der Dokumentation werden beide erwähnt, aber es wird nicht ins Detail gegangen, einige Methoden erfordern Komponenten, andere Elemente...

Antwort #1

Es gibt drei verwandte Arten von Dingen, die hier beteiligt sind, mit ihren eigenen Namen:

  • Komponenten
  • Komponenteninstanzen
  • Elemente

Das ist etwas überraschend, da man, wenn man an andere UI-Frameworks gewöhnt ist, erwarten könnte, dass es nur zwei Arten von Dingen gibt, die ungefähr Klassen (wie Widget) und Instanzen (wie new Widget()) entsprechen. Das ist in React nicht der Fall; Komponenteninstanzen sind nicht dasselbe wie Elemente, noch besteht eine Eins-zu-eins-Beziehung zwischen ihnen. Um dies zu veranschaulichen, betrachten Sie diesen Code:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log('This is a component instance:', this);
  }

  render() {
    const another_element = <div>Hello, World!</div>;
    console.log('This is also an element:', another_element);
    return another_element;
  }
}

console.log('This is a component:', MyComponent)

const element = <MyComponent/>;

console.log('This is an element:', element);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Im obigen Code:

  • MyComponent (die Klasse selbst) ist eine Komponente
  • element ist ein Element. Es ist nicht eine Instanz von MyComponent; vielmehr ist es einfach eine Beschreibung der zu erstellenden Komponenteninstanz. Es ist ein Objekt mit den Eigenschaften key, props, ref und type. Hier sind key und ref null, props ist ein leeres Objekt, und type ist MyComponent.
  • Eine Instanz von MyComponent wird erstellt (und protokolliert im obigen Beispiel sich selbst aus ihrem Konstruktor), wenn element gerendert wird.
  • another_element ist auch ein Element und hat die Eigenschaften key, ref, props und type, genau wie element - aber dieses Mal ist der Wert von type die Zeichenkette "div".

Die Designgründe, warum React diese drei unterschiedlichen Konzepte hat, werden ausführlich im Blogbeitrag des React-Teams React Components, Elements, and Instances behandelt, den ich zu lesen empfehle.

Schließlich sollte darauf hingewiesen werden, dass, während die offiziellen Dokumente strikt darauf bestehen, den Begriff „Komponente“ für eine Funktion oder Klasse und „Komponenteninstanz“ für eine Instanz zu verwenden, andere Quellen nicht unbedingt diese Terminologie einhalten; man sollte erwarten, dass „Komponente“ (fälschlicherweise) verwendet wird, um „Komponenteninstanz“ zu bedeuten, wenn man Antworten auf Stack Overflow oder Diskussionen auf GitHub liest.

Antwort #2

Um die Antwort weiter auszuführen: Ein React-Element hat keine Methoden und nichts auf dem Prototyp. Das macht sie auch schnell.

"Ein ReactElement ist eine leichte, zustandslose, unveränderliche, virtuelle Darstellung eines DOM-Elements" - Glossar der React-Begriffe

Eine React-Komponenten-render()-Funktion gibt hinter den Kulissen einen DOM-Baum von React-Elementen zurück (das ist übrigens das virtuelle DOM). Es gibt eine komplexe Mapping- und Diff-Logik, aber im Grunde entsprechen diese React-Elemente den DOM-Elementen.

Sie können auch ein Element direkt React.createElement(arg) erstellen, wobei arg ein HTML-Tag-Name oder eine React-Komponentenklasse sein kann.

Antwort #3

React-Elemente vs. React-Komponenten

React-Elemente

  • Ein React-Element ist das, was von Komponenten zurückgegeben wird. Es ist ein Objekt, das die DOM-Knoten, die eine Komponente darstellt, virtuell beschreibt.
  • Bei einer Funktionskomponente ist dieses Element das Objekt, das die Funktion zurückgibt.
  • Bei einer Klassenkomponente ist das Element das Objekt, das die Renderfunktion der Komponente zurückgibt. R
  • React-Elemente sind nicht das, was wir im Browser sehen. Sie sind nur Objekte im Speicher und wir können nichts an ihnen ändern.
  • React-Elemente können andere type-Eigenschaften haben als native HTML-Elemente.
  • Ein React-Element beschreibt, was wir auf dem Bildschirm sehen wollen.
  • Ein React-Element ist eine objektbasierte Darstellung eines DOM-Knotens.

Es ist wichtig, diese Unterscheidung hier zu treffen, weil das Element nicht das eigentliche Ding ist, das wir auf dem Bildschirm sehen, sondern die Objekt repräsentation das ist, was gerendert wird.

React ist in dieser Hinsicht auf diese Weise gut:

  • React kann diese Elemente erstellen und zerstören, ohne viel Overhead zu verursachen. Die JS-Objekte sind leichtgewichtig und kostengünstig.
  • React kann ein Objekt mit der vorherigen Objektrepräsentation vergleichen, um zu sehen, was sich geändert hat.
  • React kann das tatsächliche DOM speziell an den Stellen aktualisieren, an denen die Änderungen erkannt wurden. Dies hat einige Leistungs-Vorteile.
const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
  )
  1. Der Tag-Name (z. B. div, span, usw.)
  2. Beliebige Attribute, die wir möchten, dass das Element hat
  3. Der Inhalt der Kindelemente des Elements (z. B. der Text, der Login lautet)
{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

<div id='login-btn'>Login</div>

Hurra!

Im Allgemeinen wird React ausgehend von einem Komponenten-Ansatz gelehrt, jedoch macht das Verständnis des Elemente-Ansatzes den Übergang zu Komponenten reibungslos.

React-Komponenten

Eine Komponente ist eine Funktion oder eine Klasse, die optional Eingaben akzeptiert und ein React-Element zurückgibt.

  • Eine React-Komponente ist eine Vorlage. Ein Bauplan. Eine globale Definition. Dies kann entweder eine Funktion oder eine Klasse (mit einer Render-Funktion) sein.

  • Wenn React eine Klasse oder eine Funktion als erstes Argument sieht, wird es prüfen, welches Element sie rendert, unter Berücksichtigung der entsprechenden Props, und wird dies so lange fortsetzen, bis es keine createElement-Aufrufe mehr gibt, die eine Klasse oder eine Funktion als erstes Argument haben.

  • Wenn React ein Element mit einem Funktions- oder Klassentyp sieht, wird es mit dieser Komponente Rücksprache halten, um zu wissen, welches Element sie zurückgeben sollte, unter Berücksichtigung der entsprechenden Props.

  • Am Ende dieses Prozesses wird React eine vollständige Objekt-Darstellung des DOM-Baums haben. Dieser gesamte Prozess wird in React als Reconciliation bezeichnet und wird jedes Mal ausgelöst, wenn setState oder ReactDOM.render aufgerufen wird.

Die Klassensyntax ist eine der gebräuchlichsten Methoden, um eine React-Komponente zu definieren. Obwohl sie ausführlicher ist als die funktionale Syntax, bietet sie mehr Kontrolle in Form von Lebenszyklus-Hooks.

  • Wir können viele Instanzen derselben Komponente rendern.
  • Die Instanz ist das Schlüsselwort „this“, das innerhalb der klassenbasierten Komponente verwendet wird.
  • Wird nicht manuell erstellt und befindet sich irgendwo im Speicher von React.

Einen Klassenkomponenten erstellen

// MyComponent.js
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return (
      <div>This is my component.</div>
    );
  }
}

export default MyComponent;

In jeder anderen Komponente verwenden

// MyOtherComponent.js
import React, { Component } from 'react';
import MyComponent from './MyComponent';

class MyOtherComponent extends Component {
  render() {
    return (
      <div>
        <div>This is my other component.</div>
        <MyComponent />
      </div>
    );
  }
}

export default MyOtherComponent;

Requisiten verwenden

<MyComponent myProp="This is passed as a prop." />

Requisiten können mit this.props aufgerufen werden

class MyComponent extends Component {
  render() {
    const {myProp} = this.props;
    return (
      <div>{myProp}</div>
    );
  }
}

Verwendung von Zustand

class MyComponent extends Component {
  render() {
    const {myState} = this.state || {};
    const message = `The current state is ${myState}.`;
    return (
      <div>{message}</div>
    );
  }
}

Verwendung von Lebenszyklus-Hooks

class MyComponent extends Component {
  // Executes after the component is rendered for the first time
  componentDidMount() {
    this.setState({myState: 'Florida'});
  }

  render() {
    const {myState} = this.state || {};
    const message = `The current state is ${myState}.`;
    return (
      <div>{message}</div>
    );
  }
}
  • Haben Sie keine Instanzen.
  • Kann mehrfach gerendert werden, aber React ordnet jeder Renderung keine lokale Instanz zu.
  • React verwendet den Aufruf der Funktion, um zu bestimmen, welches DOM-Element für die Funktion gerendert werden soll.

Mit createElement

function Button ({ addFriend }) {
  return React.createElement(
    "button",
    { onClick: addFriend },
    "Add Friend"
  )
}

function User({ name, addFriend }) {
  return React.createElement(
    "div",
    null,
    React.createElement(
      "p",
      null,
      name
    ),
    React.createElement(Button, { addFriend })
  )
}

Mit dem, was createElement zurückgibt

function Button ({ addFriend }) {
  return {
    type: 'button',
    props: {
      onClick: addFriend,
      children: 'Add Friend'
    }
  }
}

function User ({ name, addFriend }) {
  return {
    type: 'div',
    props: {
      children: [
        {
          type: 'p',
          props: {
            children: name
          }
        },
        {
          type: Button,
          props: {
            addFriend
          }
        }
      ]
    }
  }
}

Hier haben wir eine Button-Komponente, die eine onLogin-Eingabe annimmt und ein React-Element zurückgibt.

  • Die Button-Komponente erhält eine onLogin-Methode als ihre Eigenschaft.
  • Um dies an unsere Objekt-Darstellung des DOM weiterzugeben, übergeben wir es als zweiten Parameter an createElement, genau wie wir es mit dem id-Attribut gemacht haben.

Antwort #4

React-Elemente

Ein React-Element ist einfach ein ganz normales JavaScript-Object ohne eigene Methoden. Es hat im Wesentlichen vier Eigenschaften:

  • type, ein String, der ein HTML-Tag darstellt oder auf eine React-Komponente verweist
  • key, ein String, um ein React-Element eindeutig zu identifizieren
  • ref, eine Referenz, um entweder auf den zugrunde liegenden DOM-Knoten oder die React-Komponenten-Instanz zuzugreifen)
  • props (Eigenschaften Objekt)

Ein React-Element ist keine Instanz einer React-Komponente. Es ist nur eine vereinfachte „Beschreibung“ davon, wie die React-Komponenteninstanz (oder je nach type ein HTML-Tag) aussehen soll, wenn sie erstellt wird.

Ein React-Element, das eine React-Komponente beschreibt, weiß nicht, auf welchem DOM-Knoten es schließlich gerendert wird - diese Zuordnung ist abstrahiert und wird während des Renderns aufgelöst.

React-Elemente können Kind-Elemente enthalten und sind somit in der Lage, Elementbäume zu bilden, die den Virtual DOM-Baum darstellen.

React-Komponenten und React-Komponenteninstanzen

Eine benutzerdefinierte React-Komponente wird entweder durch React.createClass erstellt oder indem React.Component (ES2015) erweitert wird. Wenn eine React-Komponente instanziiert wird, erwartet sie ein props-Objekt und gibt eine Instanz zurück, die als React-Komponenteninstanz bezeichnet wird.

Eine React-Komponente kann Zustand enthalten und hat Zugriff auf die React-Lifecycle-Methoden. Sie muss mindestens eine render-Methode haben, die beim Aufruf ein React-Element(-Baum) zurückgibt. Bitte beachten Sie, dass Sie React-Komponenten-Instanzen niemals selbst erstellen, sondern React dies für Sie tun lassen.

Antwort #5

React-Element - Es ist ein einfaches Objekt, das einen DOM-Knoten und dessen Attribute oder Eigenschaften beschreibt, könnte man sagen. Es ist ein unveränderliches Beschreibungsobjekt und man kann keine Methoden darauf anwenden.

z. B. -

<button class="blue"></button>

React-Komponente - Es ist eine Funktion oder Klasse, die eine Eingabe akzeptiert und ein React-Element zurückgibt. Sie muss Referenzen zu ihren DOM-Knoten und zu den Instanzen der Kindkomponenten behalten.

const SignIn = () => (
  <div>
   <p>Sign In</p>
   <button>Continue</button>
   <button color='blue'>Cancel</button>
  </div>
);

Antwort #6

Eine Komponente ist eine Fabrik zur Herstellung von Elementen.

Verwandte Artikel