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 (
      1fb07efbe2524295a719668b214948aa
        345d5db7f2762808d7874072253db7c0欢迎进入React的世界473f0a7621bec819994bb5020d29372a
        e388a4556c0f65e1904146cc1a846bee
          React.js 是一个构建页面 UI 的库
        94b3e26ee717c64999d7867364b1b4a3
      94b3e26ee717c64999d7867364b1b4a3
    )
  }
}

ReactDOM.render(
    3efbfcf616b81c5b71826e3d65d503c4,
  document.getElementById('root')
)

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!