概述
要明白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 (
<p className='app' id='appRoot'>
<h1 className='title'>欢迎进入React的世界</h1>
<p>
React.js 是一个构建页面 UI 的库
</p>
</p>
)
}
}
ReactDOM.render(
<App />,
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 的时候一定要经过编译的过程
推荐学习：《js基础教程》
以上就是一文知晓JSX原理（推荐）的详细内容，更多请关注靠谱客其它相关文章！
最后
以上就是多情皮带为你收集整理的一文知晓JSX原理（推荐）的全部内容，希望文章能够帮你解决一文知晓JSX原理（推荐）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复