資訊專欄INFORMATION COLUMN
摘要：但多頁應(yīng)用不用考慮新舊頁面的變化，一個(gè)多頁應(yīng)用每一頁都會(huì)重新建立。下面咱們圍繞一個(gè)單頁應(yīng)用的，來細(xì)說。如果沒有這兩個(gè)庫，我們是沒法創(chuàng)建應(yīng)用的。結(jié)束語本篇文章大概講了怎么創(chuàng)建一個(gè)單頁應(yīng)用，讓大家了解一下。
好久沒寫文章了，今天來分享一篇 關(guān)于 react 的 helloWord 。如果你也是剛開始學(xué)習(xí)react，或者已經(jīng)久仰 react 并開始著手學(xué)習(xí)，那或許這篇文章能給你一點(diǎn)啟發(fā)。
文章圍繞一個(gè)小案例來學(xué)習(xí) -- 創(chuàng)建一個(gè)簡單的單頁應(yīng)用
一、了解什么是單頁應(yīng)用，什么是多頁應(yīng)用
1、以前你做的或看到的網(wǎng)站可能包含多個(gè)多帶帶的網(wǎng)頁，主頁一個(gè)導(dǎo)航，點(diǎn)開打開另一個(gè)網(wǎng)頁，這就是傳統(tǒng)的多頁應(yīng)用。多頁應(yīng)用有什么優(yōu)缺點(diǎn)呢？
首先對用戶的體驗(yàn)不是很好，銷毀一個(gè)網(wǎng)頁，再重新打開另一個(gè)網(wǎng)頁。其次數(shù)據(jù)的傳遞也不是很便利，利用cookie和服務(wù)端來保存用戶數(shù)據(jù)是一種普遍的處理方式，但是 不 方 便 。但多頁應(yīng)用不用考慮新舊頁面的變化，一個(gè)多頁應(yīng)用每一頁都會(huì)重新建立。
2、單頁應(yīng)用（SAP），單頁應(yīng)用不需要重新加載整個(gè)頁面，單頁應(yīng)用可以對整個(gè)頁面進(jìn)行區(qū)塊化劃分，加載和卸載某一塊區(qū)塊。在單頁應(yīng)用中，我們的大部分時(shí)間會(huì)花在保持?jǐn)?shù)據(jù)與 UI 同步上。
那單頁應(yīng)用有什么缺陷嗎？有地，不如單頁應(yīng)用回頻繁的操作dom ，對節(jié)點(diǎn)的刪除和添加，這樣加大了瀏覽器對性能的要求。
二、react的出現(xiàn)
首先單頁應(yīng)用無疑來說對用戶的體驗(yàn)更加友好的，那么站在用戶的角度，我們只要解決單頁應(yīng)用的缺陷不就兩全其美了。
Facebook (和 Instagram) 覺得該解決這些問題了。在經(jīng)歷了足夠的單頁應(yīng)用實(shí)踐后，他們發(fā)布了一個(gè)叫做 React 的庫。
react 并不關(guān)心UI 開始是什么狀態(tài)，只關(guān)心UI的最終狀態(tài)。因?yàn)?DOM 操作是真的很慢，所以React不會(huì)直接 修改 DOM，而是修改內(nèi)存中的虛擬 DOM，React在每次需要渲染時(shí)，會(huì)先比較當(dāng)前DOM內(nèi)容和待渲染內(nèi)容的差異，然后再?zèng)Q定如何最優(yōu)地更新DOM。
或許你聽說過 MVC MVP MVVC 等一些設(shè)計(jì)模式，你可以吧 react 當(dāng)中 V 層，也就是 view 層，專門來負(fù)責(zé) ui 的處理，react 把頁面的各個(gè)功能分成一小塊（俗稱組件），更新頁面的時(shí)候只更新改動(dòng)過的組件即可。
三、開始進(jìn)入正題。
下面咱們圍繞一個(gè) 單頁應(yīng)用的demo ，來細(xì)說 react 。
思路是這樣的 ，先講解一下 react 的一些新知識和概念 -- 上代碼 -- 對代碼進(jìn)行解釋 -- 總結(jié)
1、依賴庫
第一行引入 核心 React 庫，第二行引入 React DOM 庫。如果沒有這兩個(gè)庫，我們是沒法創(chuàng)建 React 應(yīng)用的。
Web 應(yīng)用（以及瀏覽器顯示的其它一切）是由 HTML、CSS 和 JavaScript 組成的：所以，我們還需要在兩個(gè) script 標(biāo)記下添加對 Babel JavaScript 編譯器的引用：
Babel 可以做很多很酷的事情，但是我們關(guān)心的是將 JSX 變成 JavaScript 的能力。 JSX 下面解釋。
添加
ReactRouter 為由 React 創(chuàng)建的單頁應(yīng)用提供了路由能力.因?yàn)樵谠嫉亩囗搼?yīng)用中，地址欄 url 是實(shí)時(shí)對應(yīng)你訪問頁面的地址的。但在單頁應(yīng)用中，組件的替換或添加不能在地址欄url實(shí)時(shí)對應(yīng)，當(dāng)用戶刷新或后退網(wǎng)頁，就不在對應(yīng)用戶原先訪問的那個(gè)頁面了。所以 ReactRouter 是來幫咱們解決這一問題的一個(gè) js庫
應(yīng)用模板：
React Components
2、JSX
JSX 你可以把它看做可以寫 js 和 html 的混合標(biāo)記。我們通常在 js 里面動(dòng)態(tài)的創(chuàng)建一個(gè)html元素是這樣的：
var xxx = document.createElement("div");
xxx.className = "xxx";
xxx.xxx
.......
xxx.appendChild(xxx);
但有了 JSX ，你就可以這樣：
運(yùn)行上面的代碼是在 body 顯示 Batman 的字樣 ，后面會(huì)解釋 ，反正要?jiǎng)?chuàng)建 html元素，直接寫 html語法就可以了，是不是很酷。
3、組件的概念
單頁應(yīng)用最重要的就是將頁面組件化。
最開始我們創(chuàng)建組件的方式是用 React.createClass
一個(gè)簡單的 helloword組件：
var HelloWorld = React.createClass({
render: function() {
return (
你好，react 組件!
);
}
});
上面是利用 React.createClass 創(chuàng)建一個(gè)組件，組件有一個(gè)強(qiáng)制性的屬性render，render方法的return 返回組件的內(nèi)容。
組件的引用：
ReactDOM.render(, document.body );
render 將 HelloWorld組件添加到 body 中
也許你會(huì)很好奇在瀏覽器上顯示是什么結(jié)構(gòu)的：
4、一個(gè)單頁應(yīng)用的demo
有了上面的基礎(chǔ)知識，咱們利用demo進(jìn)一步學(xué)習(xí)。
效果圖：點(diǎn)擊 nav 會(huì)切換不同的頁面，但注意是單頁的！
（1）、創(chuàng)建導(dǎo)航條組件
var App = React.createClass({
render: function() {
return (
Simple SPA
- Home
- Stuff
- Contact
)
}
});
上面簡單的創(chuàng)建了個(gè)導(dǎo)航條的組件，其中 ``
（2）、創(chuàng)建 Home 組件：
var Home = React.createClass({
render: function() {
return (
HELLO
Cras facilisis urna ornare ex volutpat, et
convallis erat elementum. Ut aliquam, ipsum vitae
gravida suscipit, metus dui bibendum est, eget rhoncus nibh
metus nec massa. Maecenas hendrerit laoreet augue
nec molestie. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus.
Duis a turpis sed lacus dapibus elementum sed eu lectus.
);
}
});
到這里應(yīng)該比較能適應(yīng) React 創(chuàng)建組件的方式了吧。 render方法里面有個(gè) return 來返回組件的內(nèi)容。
（3）、創(chuàng)建 Contact 和 Stuff 組件：
var Contact = React.createClass({
render: function() {
return (
GOT QUESTIONS?
The easiest thing to do is post on
our forums.
);
}
});
var Stuff = React.createClass({
render: function() {
return (
STUFF
Mauris sem velit, vehicula eget sodales vitae,
rhoncus eget sapien:
- Nulla pulvinar diam
- Facilisis bibendum
- Vestibulum vulputate
- Eget erat
- Id porttitor
);
}
});
（5）、往導(dǎo)航條添加鏈接
組件都創(chuàng)建好了，接下來就是怎么將組件對應(yīng)起來咯，
var App = React.createClass({
render: function() {
return (
Simple SPA
Home - Stuff
- Contact
{this.props.children}
)
}
});
App 是剛開始創(chuàng)建的導(dǎo)航條組件，這里咱們用到了一個(gè) React Router 的 Link 組件，其實(shí)它是跟 類似 ，但提供的功能更多 ， to 就好比 的 href ，指向一個(gè)鏈接。 (6)、加載組件 上面用到了 Route 組件， 當(dāng)你訪問的 url為 /stuff 時(shí)就加載組件 Stuff（Stuff組件咱們前面已經(jīng)寫好了），當(dāng)你訪問 url 為 /Contact 時(shí) 就加載組件 Contact，那訪問 url 為 / 呢 ，那就加載 `IndexRoute ，這也是 IndexRoute 不同于組件 Route `。 那結(jié)合第五部統(tǒng)一分析下： Link to 是給 組件`` Stuff指定了鏈接 ， Route組件是給 鏈接定義了對應(yīng)的組件，最后由 來加載顯示出對應(yīng)的組件。 結(jié)束語： 下面上完整代碼： 文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。 轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91154.html
那上面代碼就好理解啦，to=“/" 就是指向當(dāng)前鏈接 ， to="/stuff" 就是指向 /stuff 鏈接。
細(xì)心的你還會(huì)發(fā)現(xiàn)第一個(gè) li 是 IndexLink組件 ，這個(gè)跟Link有什么不同呢。IndexLink組件是用來初始化時(shí)候指定的鏈接。
咱們在 里面放的不是上面創(chuàng)建的那幾 Home、Stuff 、Contact個(gè)組件 ，而是 放了個(gè) {this.props.children} ，這是啥意思呢，這里你先知道 this.props.children 可以用于訪問 子元素 以及該組件所有的任何子孫元素。這里用這個(gè)屬性來加載子組件，后面會(huì)做解釋
上面那幾步都是創(chuàng)建了組件，怎么把組件加載到頁面中還得利用 ReactDOM.renderReactDOM.render(
如下，
那么，
{this.props.children}
本篇文章大概講了 react 怎么創(chuàng)建一個(gè)單頁應(yīng)用，讓大家了解一下react 。很對具體的知識點(diǎn)多略過，想深入學(xué)習(xí)可以看以下這些教程：
React Router 使用教程
React 簡介
摘要：今天我們將討論創(chuàng)建組件的最終方案，即無狀態(tài)函數(shù)的純組件。今天我們正在研究一種處理提出的復(fù)雜數(shù)據(jù)的方法，稱為體系結(jié)構(gòu)。第天部署介紹今天，我們將探討部署我們的應(yīng)用所涉及的不同部分，以便外界可以使用我們的應(yīng)用。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3758原文：https://www.fullstackreact.com/3...
摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們將添加一個(gè)構(gòu)建過程來存儲(chǔ)常見的構(gòu)建操作，以便我們可以輕松地開發(fā)和部署我們的應(yīng)用。在要?jiǎng)?chuàng)建應(yīng)用的目錄中打開終端窗口。文件有一個(gè)的節(jié)點(diǎn)，這個(gè)應(yīng)用本身將被自動(dòng)掛載這是在文件中處理的。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3822原文：https://www.fullstackreact...
摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們從一開始就開始。讓我們看看是什么，是什么讓運(yùn)轉(zhuǎn)起來。什么是是一個(gè)用于構(gòu)建用戶界面的庫。它是應(yīng)用程序的視圖層。所有應(yīng)用程序的核心是組件。組件是可組合的。虛擬完全存在于內(nèi)存中，并且是網(wǎng)絡(luò)瀏覽器的的表示。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3765原文：https://www.ful...
摘要：我們的第一個(gè)假設(shè)是非常簡單的測試。我們正在測試以確保元素被包裝在類中。在我們編寫的每個(gè)測試中我們都需要將應(yīng)用呈現(xiàn)在工作測試文檔中。作為提醒我們可以使用命令或命令來運(yùn)行測試。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3804原文：https://www.fullstackreact.com/30-days-of-react/...
摘要：但是使用標(biāo)記將告訴瀏覽器處理路由就像服務(wù)器端路由一樣。組件需要一個(gè)稱為的屬性指向要渲染的客戶端路由。發(fā)生這種情況的原因是響應(yīng)路由器將渲染與路徑匹配的所有內(nèi)容除非另有指定。屬性預(yù)計(jì)將是一個(gè)函數(shù)將在對象連同和路由配置時(shí)調(diào)用。 本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3815原文：https://www.fullstackrea...
閱讀 3034·2023-04-26 03:01
閱讀 3538·2023-04-25 19:54
閱讀 1592·2021-11-24 09:39
閱讀 1374·2021-11-19 09:40
閱讀 4250·2021-10-14 09:43
閱讀 2062·2019-08-30 15:56
閱讀 1490·2019-08-30 13:52
閱讀 1660·2019-08-29 13:05
