JSX的原理怎样理解？一文带你看明白

发布时间：2022-02-08 15:30:10 所属栏目：编程来源：互联网

导读：这篇文章给大家分享的是JSX的原理，JSX 是 JavaScript 对象。这篇我们一步步来分析和理解JSX的原理，文中的示例代码介绍得很详细，有需要的朋友可以了解看看，接下来就跟随小编一起学习一下吧。 JSX原理要明白JSX的原理，需要先明白如何使用JavaScript对象

这篇文章给大家分享的是JSX的原理，JSX 是 JavaScript 对象。这篇我们一步步来分析和理解JSX的原理，文中的示例代码介绍得很详细，有需要的朋友可以了解看看，接下来就跟随小编一起学习一下吧。

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]
)

（编辑：宿州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!