手機(jī)也能上課
1/6
初學(xué)者模板
使用 React 開發(fā)網(wǎng)頁(yè)時(shí)，我們需要使用到 React 提供的兩個(gè) JavaScript 包，分別是 react.js 和 react-dom.js：
- react.js：提供 React 的頂級(jí) API，是 React 的核心庫(kù)，其核心思想是虛擬DOM（Virtual DOM）；
- react-dom.js：提供針對(duì) DOM 操作的相關(guān) API；
值得注意的是：react-dom.js 是基于 react.js 的，因此頁(yè)面中需要保證 react.js 先加載！
另外，React 推薦開發(fā)者使用特殊的 JSX 語(yǔ)法來(lái)編寫 UI 代碼，對(duì)于初學(xué)者來(lái)講，嘗試 JSX 最快的方法是在頁(yè)面中引入 babel-standalone.js 包。將以上 JavaScript 包整合在一起，可得到以下這個(gè)初學(xué)者頁(yè)面模板：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>React 的初學(xué)者模板</title>
</head>
<body>
<script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/7.0.0-beta.3/babel.js"></script>
<script type="text/babel">
// 可以在這個(gè) script 標(biāo)簽里使用 JSX 語(yǔ)法
</script>
</body>
</html>說(shuō)明：模板中引入的 JavaScript 文件均來(lái)自 Staticfile CDN 提供的在線文件，你可以將它們下載到本地使用，當(dāng)然，它們也支持 npm 下載，前提是你的系統(tǒng)支持 Node.js。
為什么說(shuō)上述模板是初學(xué)者模板呢？
- 模板中引入的是 React 提供的 development版本，它包含了完整的警告和調(diào)試模式，有助于初學(xué)者從一開始就遵循 React 約定好的開發(fā)規(guī)范；
- 細(xì)心的小伙伴可能已經(jīng)發(fā)現(xiàn)了，模板中的最后一個(gè) script 標(biāo)簽指定了 type 屬性為 text/babel，這是因?yàn)?React 推薦使用的 JSX 語(yǔ)法無(wú)法被瀏覽器內(nèi)置的 JavaScript 引擎解析，需要使用 Babel 對(duì)其進(jìn)行預(yù)編譯，所以凡是使用了 JSX 語(yǔ)法的 script 標(biāo)簽都要加上 type = "text/babel"。
與以上兩點(diǎn)相對(duì)應(yīng)，你需要了解的是：
- React 提供的 development 版本僅適用于開發(fā)環(huán)境，不適合生產(chǎn)環(huán)境，也就是說(shuō)，在項(xiàng)目上線時(shí)，需要使用壓縮優(yōu)化后的 production.min.js版本；
- 通過(guò)引入 babel-standalone.js 來(lái)編譯 JSX 效率是非常低的，因?yàn)榛谶@種方式的編譯過(guò)程完全運(yùn)行在瀏覽器端，瀏覽器不僅要加載 babelstandalone.js 文件，還要借助此文件去編譯 JSX，整個(gè)過(guò)程會(huì)比較耗時(shí)。所以在實(shí)際開發(fā)中，我們會(huì)在項(xiàng)目上線前先將 JSX 代碼編譯為 JS 代碼，減輕瀏覽器的負(fù)擔(dān)，從而提高用戶體驗(yàn)！