平武建站

JSX原理是什么

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

创新互联公司专注为客户提供全方位的互联网综合服务，包含不限于成都网站设计、做网站、金溪网络推广、重庆小程序开发公司、金溪网络营销、金溪企业策划、金溪品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们最大的嘉奖；创新互联公司为所有大学生创业者提供金溪建站搭建服务，24小时服务热线：028-86922220，官方网址：www.cdcxhl.com

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


  欢迎进入React的世界
  

    React.js 是一个帮助你构建页面 UI 的库
  

上面这个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的对象结构。

import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  render () {
    return (
      
        欢迎进入React的世界
        

          React.js 是一个构建页面 UI 的库
        

      

    )
  }
}

ReactDOM.render(
    ,
  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(
          "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 的时候一定要经过编译的过程

JSX — 使用react构造组件，bable进行编译 —> JavaScript对象 — ReactDOM.render() —> DOM元素 —> 插入页面

“JSX原理是什么”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！


新闻名称：JSX原理是什么
文章分享：http://pwwzsj.com/article/jejgjd.html

其他资讯