Um die Prinzipien von JSX zu verstehen, müssen Sie zunächst verstehen, wie Sie JavaScript-Objekte verwenden, um die Struktur eines DOM-Elements auszudrücken.
Sehen Sie sich die DOM-Struktur unten an:
欢迎进入React的世界
React.js 是一个帮助你构建页面 UI 的库
Wir können JavaScript-Objekte verwenden, um alle Informationen im obigen HTML darzustellen:
{ tag: 'p', attrs: { className: 'app', id: 'appRoot'}, children: [ { tag: 'h1', attrs: { className: 'title' }, children: ['欢迎进入React的世界'] }, { tag: 'p', attrs: null, children: ['React.js 是一个构建页面 UI 的库'] } ] }
Aber das ist zu lang, um es in JavaScript zu schreiben, und die Struktur ist nicht klar HTML ist sehr praktisch.
Daher hat React.js die Syntax von JavaScript erweitert, um das Schreiben einer Syntax ähnlich der HTML-Tag-Strukturen in JavaScript-Code zu ermöglichen, was viel praktischer ist. Der Kompilierungsprozess konvertiert JSX-Strukturen ähnlich wie HTML in JavaScript-Objektstrukturen.
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render () { return (
欢迎进入React的世界
React.js 是一个构建页面 UI 的库
) } } ReactDOM.render(
Konvertieren in
import React from 'react' import ReactDOM from 'react-dom' class App extends React.Component { render () { return ( React.createElement( "p", { className: 'app', id: 'appRoot' }, React.createElement( "h1", { className: 'title' }, "欢迎进入React的世界" ), React.createElement( "p", null, "React.js 是一个构建页面 UI 的库" ) ) ) } } ReactDOM.render( React.createElement(App), document.getElementById('root') )
React.createElement erstellt ein JavaScript-Objekt, um die Informationen Ihrer HTML-Struktur zu beschreiben, einschließlich Tag-Namen, Attributen, Unterelementen usw. Die Syntax lautet
React.createElement( type, [props], [...children] )
Das sogenannte JSX ist eigentlich ein JavaScript-Objekt, also müssen Sie bei Verwendung von React und JSX den Kompilierungsprozess durchlaufen
JSX – Verwenden Sie React, um Komponenten zu erstellen, und kompilieren Sie mit Babel –> JavaScript-Objekt –
ReactDOM.render()–> DOM-Element –> In die Seite einfügen
