Was ist JSX in React

react JSX ist eine JavaScript-Syntaxerweiterung, die in der React-Architektur verwendet wird. Ihr Format ähnelt eher einer Vorlagensprache, tatsächlich ist sie jedoch vollständig in JavaScript implementiert der Verwendung von React.js.

Die Betriebsumgebung dieses Artikels: Windows 10-System, React 16, Thinkpad T480-Computer.

Empfohlen: „React-Video-Tutorial“

Was ist JSX in React?

JSX ist JavaScript XML, ein Format, das Javascript und XML kombiniert.

JSX ist eine JavaScript-Syntaxerweiterung, die in der React-Architektur verwendet wird. Ihr Format ähnelt eher einer Vorlagensprache, tatsächlich ist sie jedoch vollständig in JavaScript implementiert. Elemente sind die kleinste Einheit, aus der eine React-Anwendung besteht. JSX wird zum Deklarieren von Elementen in React verwendet.

JSX ist eine Reihe von Syntaxzuckern, die für React.js entwickelt wurden und auch die Grundlage für React.js bilden. React kann auch ohne die Verwendung von JSX funktionieren. Die Verwendung von JSX kann jedoch die Lesbarkeit von Komponenten verbessern, daher wird die Verwendung von JSX empfohlen.

Dies ist die offizielle Website: http://facebook.github.io/jsx/

Funktionen von JSX

Sie können HTML-Sprache direkt in JavaScript-Sprache schreiben, ohne Anführungszeichen hinzuzufügen . Es ermöglicht das Mischen von HTML und JavaScript.

JSX ermöglicht das direkte Einfügen von JavaScript-Variablen in Vorlagen. Wenn diese Variable ein Array ist, werden alle Mitglieder des Arrays erweitert.

Anti-Injection-Angriffe

Es ist sicher, Benutzereingaben in JSX einzubetten.

React DOM filtert standardmäßig alle eingehenden Werte vor dem Rendern. Dadurch wird sichergestellt, dass die Anwendung nicht anfällig für Injektionsangriffe ist. Der gesamte Inhalt wird vor dem Rendern in Zeichenfolgen konvertiert. Dadurch kann XSS (Cross-Site-Scripting-Angriffe) wirksam verhindert werden

Der Babel-Übersetzer konvertiert JSX in einen Methodenaufruf namens React.createElement().

Wenn Sie die JSX-Syntax in gewöhnlichem HTML schreiben möchten, müssen Sie den Skripttyp in text/jsx ändern. Dies liegt daran, dass die einzigartige JSX-Syntax von React nicht mit JavaScript kompatibel ist. Überall dort, wo JSX verwendet wird, muss type="text/jsx" hinzugefügt werden. Zweitens stellt React zwei Bibliotheken bereit: React.js und JSXTransformer.js, die zuerst geladen werden müssen. Unter anderem besteht die Funktion von JSXTransformer.js darin, die JSX-Syntax in die JavaScript-Syntax umzuwandeln. Dieser Schritt ist sehr zeitaufwändig und sollte auf dem Server durchgeführt werden, wenn dieser tatsächlich online ist.

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