JSX原理是什么

本篇內(nèi)容介紹了“JSX原理是什么”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

要明白JSX的原理，需要先明白如何使用JavaScript對象來表現(xiàn)一個DOM元素的結(jié)構(gòu)。
看下面的DOM結(jié)構(gòu)：

<div class='app' id='appRoot'>
  <h2 class='title'>歡迎進入React的世界</h2>
  <p>
    React.js 是一個幫助你構(gòu)建頁面 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 是一個構(gòu)建頁面 UI 的庫']
    }
  ]
}

但是這樣用JavaScript寫起來太長了，而且結(jié)構(gòu)也不清晰，使用HTML的方式就很方便。
于是React.js就把JavaScript的語法擴展了一下，允許在JavaScript代碼中編寫類似HTML標(biāo)簽結(jié)構(gòu)的語法，這樣就方便多了，編譯的過程會把類似HTML的JSX結(jié)構(gòu)轉(zhuǎn)換為JavaScript的對象結(jié)構(gòu)。

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

class App extends React.Component {
  render () {
    return (
      <p className='app' id='appRoot'>
        <h2 className='title'>歡迎進入React的世界</h2>
        <p>
          React.js 是一個構(gòu)建頁面 UI 的庫
        </p>
      </p>
    )
  }
}

ReactDOM.render(
    <App />,
  document.getElementById('root')
)

轉(zhuǎn)換為

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 是一個構(gòu)建頁面 UI 的庫"
        )
      )
    )
  }
}

ReactDOM.render(
    React.createElement(App),
  document.getElementById('root')
)

React.createElement會構(gòu)建一個 JavaScript 對象來描述你 HTML 結(jié)構(gòu)的信息，包括標(biāo)簽名、屬性、還有子元素等, 語法為

React.createElement(
  type,
  [props],
  [...children]
)

所謂的 JSX 其實就是 JavaScript 對象，所以使用 React 和 JSX 的時候一定要經(jīng)過編譯的過程

JSX — 使用react構(gòu)造組件，bable進行編譯 —> JavaScript對象 — ReactDOM.render() —> DOM元素 —> 插入頁面

“JSX原理是什么”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！