React 第一個(gè)應(yīng)用

suosuopuo 發(fā)布于2019-08-22 10:44 / 2461人閱讀

摘要：但多頁(yè)應(yīng)用不用考慮新舊頁(yè)面的變化，一個(gè)多頁(yè)應(yīng)用每一頁(yè)都會(huì)重新建立。下面咱們圍繞一個(gè)單頁(yè)應(yīng)用的，來(lái)細(xì)說(shuō)。如果沒(méi)有這兩個(gè)庫(kù)，我們是沒(méi)法創(chuàng)建應(yīng)用的。結(jié)束語(yǔ)本篇文章大概講了怎么創(chuàng)建一個(gè)單頁(yè)應(yīng)用，讓大家了解一下。

好久沒(méi)寫文章了，今天來(lái)分享一篇關(guān)于 react 的 helloWord 。如果你也是剛開始學(xué)習(xí)react，或者已經(jīng)久仰 react 并開始著手學(xué)習(xí)，那或許這篇文章能給你一點(diǎn)啟發(fā)。
文章圍繞一個(gè)小案例來(lái)學(xué)習(xí) -- 創(chuàng)建一個(gè)簡(jiǎn)單的單頁(yè)應(yīng)用

一、了解什么是單頁(yè)應(yīng)用，什么是多頁(yè)應(yīng)用

1、以前你做的或看到的網(wǎng)站可能包含多個(gè)多帶帶的網(wǎng)頁(yè)，主頁(yè)一個(gè)導(dǎo)航，點(diǎn)開打開另一個(gè)網(wǎng)頁(yè)，這就是傳統(tǒng)的多頁(yè)應(yīng)用。多頁(yè)應(yīng)用有什么優(yōu)缺點(diǎn)呢？
首先對(duì)用戶的體驗(yàn)不是很好，銷毀一個(gè)網(wǎng)頁(yè)，再重新打開另一個(gè)網(wǎng)頁(yè)。其次數(shù)據(jù)的傳遞也不是很便利，利用cookie和服務(wù)端來(lái)保存用戶數(shù)據(jù)是一種普遍的處理方式，但是不方便。但多頁(yè)應(yīng)用不用考慮新舊頁(yè)面的變化，一個(gè)多頁(yè)應(yīng)用每一頁(yè)都會(huì)重新建立。
2、單頁(yè)應(yīng)用（SAP），單頁(yè)應(yīng)用不需要重新加載整個(gè)頁(yè)面，單頁(yè)應(yīng)用可以對(duì)整個(gè)頁(yè)面進(jìn)行區(qū)塊化劃分，加載和卸載某一塊區(qū)塊。在單頁(yè)應(yīng)用中，我們的大部分時(shí)間會(huì)花在保持?jǐn)?shù)據(jù)與 UI 同步上。
那單頁(yè)應(yīng)用有什么缺陷嗎？有地，不如單頁(yè)應(yīng)用回頻繁的操作dom ，對(duì)節(jié)點(diǎn)的刪除和添加，這樣加大了瀏覽器對(duì)性能的要求。

二、react的出現(xiàn)

首先單頁(yè)應(yīng)用無(wú)疑來(lái)說(shuō)對(duì)用戶的體驗(yàn)更加友好的，那么站在用戶的角度，我們只要解決單頁(yè)應(yīng)用的缺陷不就兩全其美了。
Facebook (和 Instagram) 覺(jué)得該解決這些問(wèn)題了。在經(jīng)歷了足夠的單頁(yè)應(yīng)用實(shí)踐后，他們發(fā)布了一個(gè)叫做 React 的庫(kù)。
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。
或許你聽(tīng)說(shuō)過(guò) MVC MVP MVVC 等一些設(shè)計(jì)模式，你可以吧 react 當(dāng)中 V 層，也就是 view 層，專門來(lái)負(fù)責(zé) ui 的處理，react 把頁(yè)面的各個(gè)功能分成一小塊（俗稱組件），更新頁(yè)面的時(shí)候只更新改動(dòng)過(guò)的組件即可。

三、開始進(jìn)入正題。

下面咱們圍繞一個(gè) 單頁(yè)應(yīng)用的demo ，來(lái)細(xì)說(shuō) react 。
思路是這樣的，先講解一下 react 的一些新知識(shí)和概念 -- 上代碼 -- 對(duì)代碼進(jìn)行解釋 -- 總結(jié)

1、依賴庫(kù)

第一行引入核心 React 庫(kù)，第二行引入 React DOM 庫(kù)。如果沒(méi)有這兩個(gè)庫(kù)，我們是沒(méi)法創(chuàng)建 React 應(yīng)用的。
Web 應(yīng)用（以及瀏覽器顯示的其它一切）是由 HTML、CSS 和 JavaScript 組成的：所以，我們還需要在兩個(gè) script 標(biāo)記下添加對(duì) Babel JavaScript 編譯器的引用：

Babel 可以做很多很酷的事情，但是我們關(guān)心的是將 JSX 變成 JavaScript 的能力。 JSX 下面解釋。

添加

ReactRouter 為由 React 創(chuàng)建的單頁(yè)應(yīng)用提供了路由能力.因?yàn)樵谠嫉亩囗?yè)應(yīng)用中，地址欄 url 是實(shí)時(shí)對(duì)應(yīng)你訪問(wèn)頁(yè)面的地址的。但在單頁(yè)應(yīng)用中，組件的替換或添加不能在地址欄url實(shí)時(shí)對(duì)應(yīng)，當(dāng)用戶刷新或后退網(wǎng)頁(yè)，就不在對(duì)應(yīng)用戶原先訪問(wèn)的那個(gè)頁(yè)面了。所以 ReactRouter 是來(lái)幫咱們解決這一問(wèn)題的一個(gè) js庫(kù)

應(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語(yǔ)法就可以了，是不是很酷。

3、組件的概念
單頁(yè)應(yīng)用最重要的就是將頁(yè)面組件化。
最開始我們創(chuàng)建組件的方式是用 React.createClass
一個(gè)簡(jiǎn)單的 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è)應(yīng)用的demo
有了上面的基礎(chǔ)知識(shí)，咱們利用demo進(jìn)一步學(xué)習(xí)。
效果圖：點(diǎn)擊 nav 會(huì)切換不同的頁(yè)面，但注意是單頁(yè)的！

（1）、創(chuàng)建導(dǎo)航條組件

var App = React.createClass({
  render: function() {
    return (
      
        Simple SPA
        
          Home
          Stuff
          Contact
        
        
         
        
      
    )
  }
});

上面簡(jiǎn)單的創(chuàng)建了個(gè)導(dǎo)航條的組件，其中 ``

用來(lái)存放內(nèi)容組件。
可能你會(huì)注意到這里用來(lái) className 屬性而不是 class ，原因是 class 是 JavaScript 中的一個(gè)特殊關(guān)鍵字，所以保留。react 用 className 來(lái)加載樣式。

（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 來(lái)返回組件的內(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)建好了，接下來(lái)就是怎么將組件對(duì)應(yīng)起來(lái)咯，

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è)鏈接。
那上面代碼就好理解啦，to=“/" 就是指向當(dāng)前鏈接， to="/stuff" 就是指向 /stuff 鏈接。
細(xì)心的你還會(huì)發(fā)現(xiàn)第一個(gè) li 是 IndexLink組件 ，這個(gè)跟Link有什么不同呢。IndexLink組件是用來(lái)初始化時(shí)候指定的鏈接。
咱們?cè)?b>

里面放的不是上面創(chuàng)建的那幾 Home、Stuff 、Contact個(gè)組件，而是放了個(gè) {this.props.children} ，這是啥意思呢，這里你先知道 this.props.children 可以用于訪問(wèn) 子元素以及該組件所有的任何子孫元素。這里用這個(gè)屬性來(lái)加載子組件，后面會(huì)做解釋

(6)、加載組件
上面那幾步都是創(chuàng)建了組件，怎么把組件加載到頁(yè)面中還得利用 ReactDOM.render

ReactDOM.render( , destination);

上面用到了 Route 組件，當(dāng)你訪問(wèn)的 url為 /stuff 時(shí)就加載組件 Stuff（Stuff組件咱們前面已經(jīng)寫好了），當(dāng)你訪問(wèn) url 為 /Contact 時(shí) 就加載組件 Contact，那訪問(wèn) url 為 / 呢，那就加載 `IndexRoute ，這也是 IndexRoute 不同于組件 Route `。

那結(jié)合第五部統(tǒng)一分析下：
如下，

Stuff

Link to 是給組件`` Stuff指定了鏈接，
那么，

Route組件是給鏈接定義了對(duì)應(yīng)的組件，最后由

{this.props.children}

來(lái)加載顯示出對(duì)應(yīng)的組件。

結(jié)束語(yǔ)：
本篇文章大概講了 react 怎么創(chuàng)建一個(gè)單頁(yè)應(yīng)用，讓大家了解一下react 。很對(duì)具體的知識(shí)點(diǎn)多略過(guò)，想深入學(xué)習(xí)可以看以下這些教程：
React Router 使用教程
React 簡(jiǎn)介

下面上完整代碼：

React! React! React!

云服務(wù)器 GPU云服務(wù)器第一個(gè)數(shù)據(jù) 第一個(gè)頂級(jí)域名 php第一個(gè)字符 php刪除第一個(gè)

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/91154.html

上一篇：《JavaScript 闖關(guān)記》之事件

下一篇：eslint的使用小技巧

相關(guān)文章

【全棧React】React 30天教程索引

摘要：今天我們將討論創(chuàng)建組件的最終方案，即無(wú)狀態(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...

appetizerio 2019-08-20 18:33 評(píng)論0 收藏0

【全棧React】第12天: 創(chuàng)建React應(yīng)用

摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們將添加一個(gè)構(gòu)建過(guò)程來(lái)存儲(chǔ)常見(jiàn)的構(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...

solocoder 2019-08-20 18:33 評(píng)論0 收藏0

【全棧React】第1天: 什么是 React?

摘要：本文轉(zhuǎn)載自眾成翻譯譯者鏈接原文今天，我們從一開始就開始。讓我們看看是什么，是什么讓運(yùn)轉(zhuǎn)起來(lái)。什么是是一個(gè)用于構(gòu)建用戶界面的庫(kù)。它是應(yīng)用程序的視圖層。所有應(yīng)用程序的核心是組件。組件是可組合的。虛擬完全存在于內(nèi)存中，并且是網(wǎng)絡(luò)瀏覽器的的表示。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3765原文：https://www.ful...

ralap 2019-08-20 18:29 評(píng)論0 收藏0

【全棧React】第24天: 測(cè)試應(yīng)用

摘要：我們的第一個(gè)假設(shè)是非常簡(jiǎn)單的測(cè)試。我們正在測(cè)試以確保元素被包裝在類中。在我們編寫的每個(gè)測(cè)試中我們都需要將應(yīng)用呈現(xiàn)在工作測(cè)試文檔中。作為提醒我們可以使用命令或命令來(lái)運(yùn)行測(cè)試。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3804原文：https://www.fullstackreact.com/30-days-of-react/...

ziwenxie 2019-08-21 11:50 評(píng)論0 收藏0

【全棧React】第17天: 客戶端路由

摘要：但是使用標(biāo)記將告訴瀏覽器處理路由就像服務(wù)器端路由一樣。組件需要一個(gè)稱為的屬性指向要渲染的客戶端路由。發(fā)生這種情況的原因是響應(yīng)路由器將渲染與路徑匹配的所有內(nèi)容除非另有指定。屬性預(yù)計(jì)將是一個(gè)函數(shù)將在對(duì)象連同和路由配置時(shí)調(diào)用。本文轉(zhuǎn)載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3815原文：https://www.fullstackrea...

harriszh 2019-08-20 18:35 評(píng)論0 收藏0

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

suosuopuo

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章
閱讀更多

tensorflow如何指定gpu

閱讀 3206·2023-04-26 03:01

tensorflow分布式訓(xùn)練

閱讀 3592·2023-04-25 19:54

什么是linux?Linux需要學(xué)習(xí)什么語(yǔ)言?

閱讀 1695·2021-11-24 09:39

C語(yǔ)言基礎(chǔ)——字符串逆序（遞歸實(shí)現(xiàn)，不使用庫(kù)函數(shù)）

閱讀 1448·2021-11-19 09:40

五萬(wàn)字15張導(dǎo)圖Java自學(xué)路線，小白零基礎(chǔ)入門，程序員進(jìn)階，收藏這篇就夠了

閱讀 4369·2021-10-14 09:43

React中禁止頁(yè)面滾動(dòng)

閱讀 2882·2019-08-30 15:56

【Amaple教程】4. 組件

閱讀 1547·2019-08-30 13:52

簡(jiǎn)易時(shí)鐘動(dòng)畫

閱讀 1717·2019-08-29 13:05

最新活動(dòng)

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

React 第一個(gè)應(yīng)用

Simple SPA

HELLO

GOT QUESTIONS?

STUFF

Simple SPA

相關(guān)文章

**【全棧React】React 30天教程索引**

【全棧React】第12天: 創(chuàng)建React應(yīng)用

**【全棧React】第1天: 什么是 React?**

【全棧React】第24天: 測(cè)試應(yīng)用

**【全棧React】第17天: 客戶端路由**

發(fā)表評(píng)論

0條評(píng)論

suosuopuo

男|高級(jí)講師

TA的文章

tensorflow如何指定gpu

tensorflow分布式訓(xùn)練

什么是linux?Linux需要學(xué)習(xí)什么語(yǔ)言?

C語(yǔ)言基礎(chǔ)——字符串逆序（遞歸實(shí)現(xiàn)，不使用庫(kù)函數(shù)）

五萬(wàn)字15張導(dǎo)圖Java自學(xué)路線，小白零基礎(chǔ)入門，程序員進(jìn)階，收藏這篇就夠了

React中禁止頁(yè)面滾動(dòng)

【Amaple教程】4. 組件

簡(jiǎn)易時(shí)鐘動(dòng)畫

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

React 第一個(gè)應(yīng)用

Simple SPA

HELLO

GOT QUESTIONS?

STUFF

Simple SPA

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！