關於 React 小書:使用 JSX 描述 UI


Posted by YongChenSu on 2020-12-09

使用 JavaScript 描述 html

{
  tag: 'div',
  attrs: { className: 'box', id: 'content'},
  children: [
    {
      tag: 'div',
      arrts: { className: 'title' },
      children: ['Hello']
    },
    {
      tag: 'button',
      attrs: null,
      children: ['Click']
    }
  ]
}


JavaScript createElement

createElement 会建立一個 JavaScript 对象来描述 HTML 的結構,包括標籤名屬性、還有子元素等。這樣就變成合法的 JavaScript 程式碼。所以使用 React 和 JSX 的時候一定要經過編譯。

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import './index.css'

class Header extends Component {
  render () {
    return (
     React.createElement(
        "div",
        null,
        React.createElement(
          "h1",
          { className: 'title' },
          "React 小书"
        )
      )
    )
  }
}

// ReactDOM.render(
//   React.createElement(Header, null), 
//   document.getElementById('root')
// );


ReactDOM.render

編譯後 ReactDOM.render 構造真正的 DOM 元素,然后把 DOM 元素放到頁面上。

ReactDOM.render(
  React.createElement(Header, null), 
  document.getElementById('root')
);



為何不是直接選染 DOM 構造,要經過中間一層

  1. 不一定會把所有元素渲染到瀏覽器的頁面上,可能會渲染到 canvas 上,或是手機 App 上,這就是為何要把 react-dom 單獨抽離出來的原因。
  2. 不用在頁面上操作 DOM,可減少瀏覽器重新渲染,優化性能。

總結

  1. JSX 是 JavaScript 的一種語法延伸,長得像 HTML,非 XML,是類似 XML 的語法。
  2. React.js 可以用 JSX 来描述 Component 長得如何。
  3. JSX 在編譯的时候會變成相應的 JavaScript 描述。
  4. react-dom 負責把這個用来描述 UI 信息的 JavaScript 對象變成 DOM 元素,並渲染到頁面上。

參考資源


#程式導師實驗計畫第四期 #前端 #React #react 小書 #JSX







Related Posts

初見狀態管理工具 Vuex (3) Mutations、Actions

初見狀態管理工具 Vuex (3) Mutations、Actions

Day 139

Day 139

[MTR04] W0 D2 心態培養

[MTR04] W0 D2 心態培養


Comments