JSX의 원리를 이해하려면 먼저 JavaScript 개체를 사용하여 DOM 요소의 구조를 표현하는 방법을 이해해야 합니다.
아래 DOM 구조를 보세요:
1 2 3 4 5 6 | <div class ='app' id='appRoot'>
<h1 class ='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个帮助你构建页面 UI 的库
</p>
</div>
|
로그인 후 복사
JavaScript 객체를 사용하여 위 HTML의 모든 정보를 표현할 수 있습니다:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | {
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 코드에서 HTML 태그 구조와 유사한 구문을 작성할 수 있도록 JavaScript 구문을 확장했습니다. 이는 컴파일 프로세스에서 HTML과 유사한 JSX 구조를 JavaScript의 객체 구조로 변환합니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
render () {
return (
<p className='app' id='appRoot'>
<h1 className='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个构建页面 UI 的库
</p>
</p>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
)
|
로그인 후 복사
Convert to
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | 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는 태그 이름, 속성, 하위 요소 등을 포함하여 HTML 구조의 정보를 설명하는 JavaScript 객체를 구축합니다. 구문은
1 2 3 4 5 | React.createElement(
type,
[props],
[...children]
)
|
로그인 후 복사
소위 JSX는 실제로 JavaScript 개체이므로 React 및 JSX를 사용할 때는 컴파일 과정을 거쳐야 합니다
JSX — React를 사용하여 구성 요소를 구성하고 babel로 컴파일 —> JavaScript 개체 — ReactDOM.render()
—> DOM 요소 —> 페이지에 삽입
위 내용은 한 글로 JSX 원칙을 알아보세요(권장)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!