Unterschied zwischen Reagieren Komponente und Reagieren Element

Gibt es drei Verwandte Arten der Sache hier beteiligt sind, mit Ihren eigenen Namen:

• Komponenten
• Komponenteninstanzen
• Elemente

Dies ist etwas überraschend, da, wenn Sie verwendet, um zu anderen UI-frameworks, die Sie möglicherweise erwarten, dass es würde nur zwei Arten von Sache, entspricht etwa Klassen (wie Widget) und Instanzen (wie new Widget()). Das ist nicht der Fall, Reagieren, Komponenten-Instanzen sind nicht das gleiche wie die Elemente, noch ist es 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')
);

In den obigen code:

• MyComponent (die Klasse selbst) ist eine Komponente
• element ist ein Element. Es ist nicht eine Instanz von MyComponent; eher, es ist einfach eine Beschreibung die Instanz der Komponente erstellt werden. Es ist ein Objekt mit key, props, ref und type Eigenschaften. Hier key und ref sind null, props ist ein leeres Objekt, und type ist MyComponent.
• Eine Instanz von MyComponent angelegt wird (und in dem oben genannten Beispiel, loggt sich von seinem Konstruktor), wenn element gerendert wird.
• another_element ist auch ein element, und hat key, ref, props und type Eigenschaften wie element tut - aber dieses mal den Wert von type ist der string "div".

Design-Gründe warum Reagieren hat diese drei Konzepte sind im detail erforscht, die in das React-team-blog-post Reagieren, Komponenten, Elemente und Instanzen, dem empfehle ich die Lektüre.

Schließlich, es sollte angemerkt werden, dass, während die offiziellen docs sind strenge über die Verwendung des Begriffs "Komponente" bezieht sich auf eine Funktion oder Klasse und die "Komponenten-Instanz" bezieht sich auf eine Instanz, die andere Quellen nicht unbedingt einhalten dieser Terminologie; Sie sollten erwarten, finden Sie unter "Komponente" verwendet wird (falsch) zu verstehen, "Komponenteninstanz" beim Lesen von Stack Overflow Antworten oder Diskussionen auf GitHub.

Reagieren Elemente

Einen Reagieren Element ist nur ein plain old JavaScript Object ohne eigenen Methoden. Es hat im wesentlichen vier Eigenschaften:

• type eine String repräsentiert ein HTML-tag oder einen Verweis bezieht sich auf einen Reagieren Komponente
• key eine String eindeutig zu identifizieren, die ein Reagieren Element
• ref eine Referenz zum Zugriff entweder auf das zugrunde liegende DOM-Knoten oder Reagieren Komponente Instanz)
• props (Eigenschaften Object)

Einen Reagieren Element ist keine Instanz von a Reagieren Komponente. Es ist nur eine vereinfachte "Beschreibung", wie die Reagieren Komponente Instanz (oder je nach type einen HTML-tag) erstellt werden, Aussehen sollte.

Einen Reagieren Element, das beschreibt, Reagieren Komponente nicht kennen, um die DOM-Knoten ist es schließlich gerendert - diese Assoziation wird abstrahiert und gelöst werden, während rendering.

Reagieren Elemente können child-Elemente enthalten und sind somit fähig, die element Bäume, die stellen die Virtuellen DOM-Baum.

Komponenten reagieren und Reagieren Komponenteninstanzen

Einer benutzerdefinierten Reagieren Komponente ist entweder erstellt durch React.createClass oder durch die Ausweitung React.Component (ES2015). Wenn ein Reagieren Komponente instanziiert wird, wird es erwartet, dass ein props Object und gibt eine Instanz, die bezeichnet wird als ein Reagieren Komponenteninstanz.

Einen Reagieren Komponente enthalten kann, die Zustand und hat Zugriff auf das Reagieren Lifecycle-Methoden. Es muss mindestens ein render Methode, die gibt einen Reagieren Element(-Baum) wenn Sie aufgerufen wird. Bitte beachten Sie, dass Sie nie konstruieren Reagieren Komponente Instanzen selbst, aber lassen Sie Reagieren erstellen es für Sie.

Einer Komponente ist eine Fabrik für die Erstellung der Elemente.

Einer element ist ein einfaches Objekt, das beschreibt, was Sie wollen, werden auf dem Bildschirm in Bezug auf die DOM-Knoten oder andere Komponenten. Elemente können andere Elemente enthalten, die in Ihrer Requisiten. Erstellen einer Reagieren element ist Billig. Sobald ein element erstellt wird, wird es nie mutiert. Die Objekt-Darstellung Reagieren element wäre wie folgt,

const element = React.createElement(
  'div',
  {id: 'login-btn'},
  'Login'
)

Den oben createElement kehrt als Objekt, wie unten,

{
  type: 'div',
  props: {
    children: 'Login',
    id: 'login-btn'
  }
}

Und schließlich macht es der DOM mit ReactDOM.render, da unten,

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

In der Erwägung, dass eine Komponente deklariert werden kann auf verschiedene Weise erfolgen. Kann es sein, dass eine Klasse eine render () - Methode. Alternativ dazu können Sie in einfachen Fällen, kann es als eine Funktion definiert werden. In jedem Fall, es dauert Requisiten als Eingabe und gibt ein-element-Baum als Ausgang. JSX transpiled wie createElement am Ende.

function Button ({ onLogin }) {
  return React.createElement(
    'div',
    {id: 'login-btn', onClick: onLogin},
    'Login'
  )
}