jsx本质,jsx与js
JSX原理要理解JSX的原理，首先需要了解如何使用JavaScript对象来表示一个DOM元素的结构。
请看下面的DOM结构：
div class=app id=appRoot
H1 class=title 欢迎来到React /h1世界
p
React.js是一个帮助你构建页面UI的库。
/p
/div上面这个HTML中的所有信息都可以用JavaScript对象来表示：
{
标签:“p”，
属性：{ className: app ，id: appRoot}，
儿童：[
{
标签:“h1”，
属性：{ className: title }，
孩子们：[欢迎来到React的世界]
},
{
标签:“p”，
属性：空，
子：[React.js是一个用于构建页面UI的库]
}
]
}但是用JavaScript写太长了，结构也不清晰，用HTML比较方便。
所以React.js扩展了JavaScript的语法，允许用JavaScript代码编写类似HTML标签结构的语法，这样就方便多了。编译过程会把类似HTML的JSX结构转换成JavaScript的对象结构。
从“react”导入React
从“react-dom”导入ReactDOM
类应用程序扩展React。组件{
render () {
返回(
app id=appRoot
H1:欢迎来到React /h1的世界
p
React.js是一个用于构建页面UI的库。
/p
/p
)
}
}
ReactDOM.render(
App /，
document.getElementById(root )
)转换为
从“react”导入React
从“react-dom”导入ReactDOM
类应用程序扩展React。组件{
render () {
返回(
React.createElement(
p ，
{
类名：“应用程序”，
id:“appRoot”
},
React.createElement(
h1 ，
{ className: title }，
欢迎来到React的世界
),
React.createElement(
p ，
空，
React.js是一个用于构建页面UI的库
)
)
)
}
}
ReactDOM.render(
React.createElement(App)，
document.getElementById(root )
)React.createElement会构建一个JavaScript对象来描述你的HTML结构的信息，包括标签名、属性、子元素。语法是
React.createElement(
类型，
【道具】，
[.儿童]
所谓的JSX实际上是一个JavaScript对象，所以在使用React和JSX的时候必须经过编译过程。
推荐：《js基础教程》以上是一篇关于认识JSX原理的文章的详细内容(推荐)。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。