要明白JSX的原理，需要先明白如何使用JavaScript物件來表現一個DOM元素的結構。
看下面的DOM結構：
<div class='app' id='appRoot'>
<h1 class='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个帮助你构建页面 UI 的库
</p>
</div>上面這個HTML所有的資訊我們都可以使用JavaScript物件來表示：
{
tag: 'p',
attrs: { className: 'app', id: 'appRoot'},
children: [
{
tag: 'h1',
attrs: { className: 'title' },
children: ['欢迎进入React的世界']
},
{
tag: 'p',
attrs: null,
children: ['React.js 是一个构建页面 UI 的库']
}
]
}
但是這樣用JavaScript寫起來太長了，而且結構也不清晰，使用HTML的方式就很方便。
於是React.js就把JavaScript的語法擴充了一下，允許在JavaScript程式碼中寫類似HTML標籤結構的語法，這樣就方便多了，編譯的過程會把類似HTML的JSX結構轉換為JavaScript的對象結構。
import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
1fb07efbe2524295a719668b214948aa
345d5db7f2762808d7874072253db7c0欢迎进入React的世界473f0a7621bec819994bb5020d29372a
e388a4556c0f65e1904146cc1a846bee
React.js 是一个构建页面 UI 的库
94b3e26ee717c64999d7867364b1b4a3
94b3e26ee717c64999d7867364b1b4a3
)
}
}
ReactDOM.render(
3efbfcf616b81c5b71826e3d65d503c4,
document.getElementById('root')
)
轉換為
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會建立一個JavaScript 物件來描述你HTML 結構的信息，包括標籤名稱、屬性、還有子元素等, 語法為
React.createElement( type, [props], [...children] )
所謂的JSX 其實就是JavaScript 對象，所以使用React 和JSX 的時候一定要經過編譯的過程
JSX — 使用react建構元件，bable進行編譯—> JavaScript物件— ReactDOM .render() —> DOM元素—> 插入頁面