Ketahui prinsip JSX dalam satu artikel (disyorkan)

Prinsip JSX

Untuk memahami prinsip JSX, anda perlu terlebih dahulu memahami cara menggunakan objek JavaScript untuk mewakili struktur elemen DOM.
Lihat struktur DOM berikut:

<div class=&#39;app&#39; id=&#39;appRoot&#39;>
  <h1 class=&#39;title&#39;>欢迎进入React的世界</h1>
  <p>
    React.js 是一个帮助你构建页面 UI 的库
  </p>
</div>

Kami boleh menggunakan objek JavaScript untuk mewakili semua maklumat dalam HTML di atas:

{
  tag: 'p',
  attrs: { className: 'app', id: 'appRoot'},
  children: [
    {
      tag: 'h1',
      attrs: { className: 'title' },
      children: ['欢迎进入React的世界']
    },
    {
      tag: 'p',
      attrs: null,
      children: ['React.js 是一个构建页面 UI 的库']
    }
  ]
}

Tetapi ini terlalu panjang untuk ditulis dalam JavaScript , dan strukturnya tidak jelas, sangat mudah untuk menggunakan HTML.
Jadi React.js mengembangkan sintaks JavaScript untuk membenarkan penulisan sintaks yang serupa dengan struktur teg HTML dalam kod JavaScript, yang jauh lebih mudah Proses penyusunan akan menukar struktur JSX yang serupa dengan HTML kepada objek 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;)
)

ditukar kepada

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 akan membina objek JavaScript untuk menerangkan maklumat struktur HTML anda, termasuk nama teg, atribut, sub-elemen, dsb. Sintaksnya ialah:

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

Yang dipanggil JSX sebenarnya adalah objek JavaScript, jadi apabila menggunakan React dan JSX, anda mesti melalui proses penyusunan

JSX — gunakan react untuk membina komponen dan babel untuk kompilasi —> Objek JavaScript — ReactDOM.render() —> Sisipkan halaman

Pembelajaran yang disyorkan: "tutorial asas js"

Atas ialah kandungan terperinci Ketahui prinsip JSX dalam satu artikel (disyorkan). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!