JSX原理是什么

魁首哥

作者

JSX原理是什么

本篇内容介绍了“JSX原理是什么”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

JSX原理是什么

要明白JSX的原理，需要先明白如何使用JavaScript对象来表现一个DOM元素的结构。
看下面的DOM结构：

<divclass='app'id='appRoot'><h2class='title'>欢迎进入React的世界</h2><p>React.js是一个帮助你构建页面UI的库</p></div>

上面这个HTML所有的信息我们都可以使用JavaScript对象来表示：

{tag:'p',attrs:{className:'app',id:'appRoot'},children:[{tag:'h2',attrs:{className:'title'},children:['欢迎进入React的世界']},{tag:'p',attrs:null,children:['React.js是一个构建页面UI的库']}]}

但是这样用JavaScript写起来太长了，而且结构也不清晰，使用HTML的方式就很方便。
于是React.js就把JavaScript的语法扩展了一下，允许在JavaScript代码中编写类似HTML标签结构的语法，这样就方便多了，编译的过程会把类似HTML的JSX结构转换为JavaScript的对象结构。

importReactfrom'react'importReactDOMfrom'react-dom'classAppextendsReact.Component{render(){return(<pclassName='app'id='appRoot'><h2className='title'>欢迎进入React的世界</h2><p>React.js是一个构建页面UI的库</p></p>)}}ReactDOM.render(<App/>,document.getElementById('root'))

转换为

importReactfrom'react'importReactDOMfrom'react-dom'classAppextendsReact.Component{render(){return(React.createElement("p",{className:'app',id:'appRoot'},React.createElement("h2",{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 的时候一定要经过编译的过程