Was gibt React.render zurück? Komponenteninstanz oder Komponentenklasse?

Question

In this Kern, in dieser Linie React.render = (ReactElement, HTMLElement | SVGElement) => ReactComponent;

Was ReactComponent bezieht? Ein instance or a class?

Grund zu fragen: Ich versuche, eine Konzeptkarte zu erstellen, die React-Terminologie visualisiert (wie unten gezeigt).

Answer 1

TL; DR React.render Gibt eine ReactComponent Instanz

---

Wie Sie geschrieben haben, React.render zwei Argumente akzeptiert. Es ist wichtig, ihre Bedeutung zu verstehen. Dieses Bit ist verwirrend, also bitte ertragen Sie mit mir.

1) ReactElement - ist eine virtuelle Dom-Instanz. Manchmal ordnet diese Instanz nativen DOM-Elementen wie "div" zu, manchmal wird sie einer ReactComponent-Instanz zugeordnet, z. B. MyComponent, die eine Baumstruktur anderer ReactElements einkapselt. Sie sehen die Rekursion hier?

ReactElement -> Tree<ReactComponent returns ReactElement -> Tree<ReactComponent returns ReactElement>> 

Nun lassen Sie sich

const virtualElement = React.createElement('MyComponent'); 

2) Das zweite Argument ist ein nativer DOM-Element eine virtuelle dom Instanz erstellen die virtualElement in zu machen.

Prinzipiell übersetzt React.render das virtualElement im nativen DOM-Element und fügt es in das native DOM-Element ein, das als zweites Argument in der React.render-Funktion angegeben ist.

---

Als Ergebnis liefert eine React.render ReactComponent Instanz (Stateful Darstellung verkapselt ReactElement Bäume).

Ich denke, Sie könnten ein wenig frustriert durch die Notation sein, aber es macht Sinn. Denken Sie daran, in Bezug auf Java zum Beispiel:

function Person getPerson() { 
    return new Person(); 
} 

See, die Signatur der Funktion, nicht PersonInstance als Rückgabewert angeben, sondern Person.