一文知晓JSX原理（推荐）

要明白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原理（推荐）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！