Welche Vorteile bietet JSX in React?

-5

Der Versuch, einen Schnitt gibt es in den offiziellen Dokumenten zu lernen zu Reagieren und das sagt dieser:Welche Vorteile bietet JSX in React?

„Die meisten Entwickler React eine spezielle Syntax verwenden JSX genannt, die es leichter macht, diese Strukturen zu schreiben.“

Dann prüfe ich das gegebene Beispiel:

React.createElement(
    "div", 
    { className: "shopping-list" }, 
    React.createElement(
    "h1", 
    null, 
    "Shopping List for ", 
    props.name 
), 
    React.createElement(
    "ul", 
    null, 
    React.createElement(
     "li", 
     null, 
     "Instagram" 
    ), 
    React.createElement(
     "li", 
     null, 
     "WhatsApp" 
    ), 
    React.createElement(
     "li", 
     null, 
     "Oculus" 
    ) 
) 
);

29 Zeilen und 470 Zeichen. Wie wird dies einer einfachen regulären HTML-Struktur mit 10 Zeilen und 170 Zeichen vorgezogen?

<div className="shopping-list"> 
    <h1> 
    Shopping List for {props.name} 
    </h1> 
    <ul> 
    <li>Instagram</li> 
    <li>WhatsApp</li> 
    <li>Oculus</li> 
    </ul> 
</div>

JSX Version scheint komplizierter mit allen Kommata und Anführungszeichen. Ist es nur wegen der schließenden Tags des HTML?

Quelle

2017-12-26 Ed Dogan

Ihr Beispiel ist nicht JSX, sondern Javascript. Auch der Vergleich von JSX mit reinem HTML bedeutet, dass Sie ReactJS eigentlich nicht verstehen. JSX gibt nicht vor, HTML zu ersetzen, sondern einfach JavaScript, wenn es um die Entwicklung von React-Apps geht. –

Huh? Das erste Beispiel ist nicht JSX. Das ist nur JavaScript. Mit JSX wird Ihr HTML in das JavaScript eingebettet, anstatt Methoden zum Erstellen des Markups aufzurufen. Ich denke, Sie müssen mehr Grundlagenforschung darüber, was JSX ist und nicht ist. [Wikipedia ist normalerweise ein guter Ausgangspunkt] (https://en.wikipedia.org/wiki/React_ (JavaScript_library) #JSX) für neue Forschung. – mason

Vorgeschlagene Lektüre https://blog.andrewray.me/youre-missing-the-point-of-jsx/ –

Ich denke, Sie haben missverstanden, was JSX ist.

Vom React doc:

const element = <h1>Hello, world!</h1>;

Diese lustige Tag-Syntax ist weder ein String noch HTML ... Es wird JSX genannt.

Mit anderen Worten, JSX ist wie HTML. Es ist einfacher, Code anstelle von reinem zu schreiben Javascript:

const element = React.createElement(
    'h1', 
    'Hello, world!' 
);

Quelle

2017-12-26 16:20:45

Das Problem hier ist Codewiederverwendung. Dieses Beispiel ist ein bisschen einfach, aber wenn Sie mit komplexen Situationen konfrontiert werden, haben Sie die Möglichkeit, Code wiederzuverwenden.

const Media = <li>{props.value}</li>;

Als Ergebnis dieser Komponente:

<div className="shopping-list"> 
    <h1> 
    Shopping List for {props.name} 
    </h1> 
    <ul> 
    <Media value="Instagram" /> 
    <Media value="WhatsApp" /> 
    <Media value="Oculus" /> 
    </ul> 
</div>

können Sie definierte Komponente wiederverwenden.

Auf der anderen Seite müssen Sie in JSX HTML mit Javascript zusammen schreiben. Das ist nicht erwünscht, da die Ansicht und der Code in derselben JSX-Datei enthalten sind.

Quelle

2017-12-26 16:25:09

Welche Vorteile bietet JSX in React?

Antwort

Verwandte Themen