一文知曉JSX原理（推薦）

JSX原理

要明白JSX的原理，需要先明白如何使用JavaScript物件來表現一個DOM元素的結構。
看下面的DOM結構：

<div class=&#39;app&#39; id=&#39;appRoot&#39;>
  <h1 class=&#39;title&#39;>欢迎进入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=&#39;app&#39; id=&#39;appRoot&#39;>
        <h1 className=&#39;title&#39;>欢迎进入React的世界</h1>
        <p>
          React.js 是一个构建页面 UI 的库
        </p>
      </p>
    )
  }
}

ReactDOM.render(
    <App />,
  document.getElementById(&#39;root&#39;)
)

轉換為

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 的時候一定要經過編譯的過程

JSX — 使用react建構元件，bable進行編譯—> JavaScript物件— ReactDOM .render() —> DOM元素—> 插入頁面

#推薦學習：《js基礎教學》

以上是一文知曉JSX原理（推薦）的詳細內容。更多資訊請關注PHP中文網其他相關文章！