使用 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 構造,要經過中間一層
- 不一定會把所有元素渲染到瀏覽器的頁面上,可能會渲染到 canvas 上,或是手機 App 上,這就是為何要把 react-dom 單獨抽離出來的原因。
- 不用在頁面上操作 DOM,可減少瀏覽器重新渲染,優化性能。
總結
- JSX 是 JavaScript 的一種語法延伸,長得像 HTML,非 XML,是類似 XML 的語法。
- React.js 可以用 JSX 来描述 Component 長得如何。
- JSX 在編譯的时候會變成相應的 JavaScript 描述。
- react-dom 負責把這個用来描述 UI 信息的 JavaScript 對象變成 DOM 元素,並渲染到頁面上。