前言

如今,對(duì)于現(xiàn)今前端熱門的三大框架Vue,Angular,React,對(duì)于web開(kāi)發(fā)者來(lái)說(shuō),早已不是什么陌生的詞

盡管三者實(shí)現(xiàn)業(yè)務(wù)最終的目的都能達(dá)成一致,但是各有特色,其中任何一框架,個(gè)人覺(jué)得,都博大精深,可圈可點(diǎn),要學(xué)習(xí)的內(nèi)容有很多,我也僅僅是淺嘗輒止而已.

有時(shí)候,因?yàn)楣ぷ黜?xiàng)目的需要,自己在切換各個(gè)技術(shù)棧的時(shí)候,只要一段時(shí)間沒(méi)有用,就有些陌生,說(shuō)到底不得不承認(rèn)自己功力不夠

本文并不是什么教程,只是作為自己學(xué)習(xí)過(guò)程中的一些總結(jié)和思考,一起學(xué)習(xí),共同成長(zhǎng)~
React學(xué)習(xí)-create-react-app內(nèi)有視頻

React是什么?

用于構(gòu)建用戶界面的javascript庫(kù),MVC架構(gòu)中的V層

• 聲明式開(kāi)發(fā)(想要實(shí)現(xiàn)什么目的,應(yīng)該做什么,但是不指定具體怎么做,如下代碼所示)

面向數(shù)據(jù)編程,只要把數(shù)據(jù)構(gòu)建好了就可以了的,react會(huì)自動(dòng)的幫你去構(gòu)建網(wǎng)站,把數(shù)據(jù)可以理解為圖紙,圖紙做好了之后,react會(huì)自動(dòng)的結(jié)合這張圖紙幫助你去構(gòu)建這個(gè)大廈,去構(gòu)建整個(gè)頁(yè)面的DOM,數(shù)據(jù)是什么,頁(yè)面就顯示什么,這種聲明式的開(kāi)發(fā)幫助我們節(jié)約掉大量的DOM操作代碼,這是react編程帶來(lái)的一個(gè)優(yōu)勢(shì))

/**
*
* 需求:編寫(xiě)一個(gè)函數(shù)，處理傳入包含大寫(xiě)字符串的數(shù)組，返回包含相同小寫(xiě)字符串的數(shù)組
* 聲明式編程實(shí)現(xiàn)toLowerCase
* 輸入數(shù)組的元素傳遞給map函數(shù)焚刺，然后返回包含小寫(xiě)值的新數(shù)組
*/

let toLowerCase = arr => arr.map(function(item) {
return item.toLowerCase();
})

let aToCasesA = ['SUIBICHUANJI','ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
let aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]

• 命令式編程(類似jQuery操作DOM,創(chuàng)建一個(gè)頁(yè)面,一點(diǎn)點(diǎn)的告訴DOM怎么去掛載,你要怎么去做,JQ,原生也好都是命令式編程，都是在做DOM操作)

/*
* 命令式編程:按照順序一步一步的實(shí)現(xiàn)
* 首先吓著，創(chuàng)建一個(gè)空數(shù)組用于保存結(jié)果，然后遍歷輸入數(shù)組的所有元素氧苍，
將每項(xiàng)元素的小寫(xiě)值存入空數(shù)組中夜矗，然后返回結(jié)果數(shù)組
*/


var aToCasesA = ['SUIBICHUANJI', 'ITCLANCODER', 'ZHONGGUO', 'BEIJING', 'AGE'];
function toLowerCase(arr) {
var res = [];
for(var i = 0; i < arr.length; i++) {
res.push(arr[i].toLowerCase());
} 
return res;
}
var aToCasesB = toLowerCase(aToCasesA);
console.log(aToCasesA); // ["SUIBICHUANJI", "ITCLANCODER", "ZHONGGUO", "BEIJING", "AGE"]
console.log(aToCasesB); // ["suibichuanji", "itclancoder", "zhongguo", "beijing", "age"]

• 函數(shù)式編程:寫(xiě)的都是一些函數(shù)，帶來(lái)了幾個(gè)好處,維護(hù)起來(lái)比較容易,當(dāng)一個(gè)函數(shù)比較大的時(shí)候,可以進(jìn)行拆分让虐，每一個(gè)函數(shù)各司其職,便于前端自動(dòng)化測(cè)試((數(shù)組中的一些map,reduce,find等方法的應(yīng)用就是函數(shù)式編程))

• 視圖層框架(在大型項(xiàng)目中,光用react是不行的,還得配合一些數(shù)據(jù)層的框架幫助我們解決一些組件之間的父子組件傳值的問(wèn)題,react把自己定義成一個(gè)視圖層的框架,并不是什么問(wèn)題都能解決,只幫助你解決數(shù)據(jù)和頁(yè)面渲染的問(wèn)題紊撕，至于組件之間怎么傳值，交給其他組件來(lái)做.

在小型項(xiàng)目中,可以借助react中的父子組件傳值就可以,但是在大型項(xiàng)目里,單單來(lái)使用react是不夠的,比如說(shuō):flux赡突，redux,mobox這樣的數(shù)據(jù)層框架),react并不是一個(gè)完整的框架,所以它學(xué)習(xí)的成本相對(duì)高些的.

React能做什么?

• 寫(xiě)web應(yīng)用(網(wǎng)站,pc端,移動(dòng)端等,例如:知乎,簡(jiǎn)書(shū)等)
• 桌面客戶端應(yīng)用軟件(類似vscode或者一些報(bào)表軟件攜帶窗口的應(yīng)用)
• webApp--react native,混合開(kāi)發(fā)應(yīng)用
• 服務(wù)器端應(yīng)用(java,php等后端語(yǔ)言能干的事情,react也能干)

只有你想不到的應(yīng)用,沒(méi)有實(shí)現(xiàn)不了的技術(shù)...

初始化一個(gè)React項(xiàng)目

前置條件

• 命令行壞境(windows中DOS CMD壞境或者git工具),蘋(píng)果Mac電腦可用自帶的Terminal,對(duì)于Linux用戶,命令行工作壞境不必贅述,這里以Windows開(kāi)發(fā)壞境為例
• 下載安裝NodeJS(React本身并不依賴Node.js但是項(xiàng)目中所需要的依賴包/工具,需要Node.js的支持),本地安完Node,默認(rèn)也就安裝了npm包管理工具

cmd或者git命令行下对扶，檢測(cè)Node與npm是否安裝成功,如果npm下載包很慢,也可以使用國(guó)內(nèi)淘寶的cnpm

D:\公開(kāi)課\2019>node -v
v10.13.0
D:\公開(kāi)課\2019>npm -v
6.4.1

當(dāng)然,你也可以安裝cnpm,使用國(guó)內(nèi)的地止,下載依賴包會(huì)快一些的

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安裝完cnpm后與npm使用并沒(méi)有什么區(qū)別

• chrome瀏覽器(應(yīng)用商店里下載React Developer Tools調(diào)試工具)

create-react-app腳手架工具

create-react-app(創(chuàng)建react應(yīng)用),它是一個(gè)通過(guò)npm發(fā)布的安裝包,也是一個(gè)命令,在安裝好nodejs后,在命令終端下執(zhí)行npm或者cnpm命令,全局安裝create-react-app這個(gè)腳手架工具

D:\公開(kāi)課\2019 npm install --global create-react-app
或者
D:\公開(kāi)課\2019 cnpm install -g create-react-app
其中-g是--global的縮寫(xiě)

在安裝好create-react-app腳手架工具后執(zhí)行create-react-app命令,這個(gè)命令會(huì)在當(dāng)前目錄下創(chuàng)建指定的參數(shù)名的應(yīng)用目錄,創(chuàng)建react項(xiàng)目應(yīng)用有三種方式
方式一:create-react-app 應(yīng)用名稱(推薦使用這種方式)

D:\公開(kāi)課\2019  create-react-app myfirstreactapp
D:\公開(kāi)課\2019  cd myfirstreactapp
D:\公開(kāi)課\2019  npm start

方式二:npm init react-app my-first-react-app

D:\公開(kāi)課\2019 npm init react-app myfirstreactapp
D:\公開(kāi)課\2019 cd myfirstreactapp
D:\公開(kāi)課\2019 npm start

方式三:使用yarn,yarn create react-app my-react-app

D:\公開(kāi)課\2019 yarn create react-app myfirstreactapp
D:\公開(kāi)課\2019 cd myfirstreactapp
D:\公開(kāi)課\2019 npm start

方式四:npx create-react-app 應(yīng)用名稱,與方式一是等價(jià)的,當(dāng)你運(yùn)行npx create-react-app my-app時(shí)，它會(huì)自動(dòng)安裝最新版本的Create React App,如果你之前全局安裝過(guò)create-react-app,請(qǐng)全局卸載

npx create-react-app myfirstreactapp

注意事項(xiàng)

• 應(yīng)用名稱不能包含大寫(xiě)字母(不能駝峰式,只能是小寫(xiě)字母

D:\公開(kāi)課\2019  create-react-app myFirstReactApp  X
D:\公開(kāi)課\2019  a project called "myFirstReactApp" because of npm naming restrictions
* name can no longer contain capital letters

• 當(dāng)使用npx create-react-app命令創(chuàng)建react應(yīng)用失敗,更改淘寶鏡像,替換成國(guó)內(nèi)下載惭缰，更改完后,在使用npm或者cnpm以及一些其他命令時(shí),下載依賴包會(huì)快很多
  查看npm的鏡像源

 D:\公開(kāi)課\2019  npm config get registry 
 // 默認(rèn)是：https://registry.npmjs.org/

修改成淘寶的鏡像源

 D:\公開(kāi)課\2019 npm config set registry https://registry.npm.taobao.org

create-react-app創(chuàng)建項(xiàng)目

D:\公開(kāi)課\2019  npx create-react-app 應(yīng)用名稱

以上的命令可以創(chuàng)建react項(xiàng)目應(yīng)用,在這個(gè)目錄下回自動(dòng)的創(chuàng)建一個(gè)應(yīng)用框架的代碼結(jié)構(gòu)

你可以在src中創(chuàng)建子目錄浪南。為了加快重建速度

注意:Webpack只處理src中的文件。你需要將任何JS和CSS文件放在src中漱受，否則Webpack將不會(huì)看到它們的

借助這個(gè)create-react-app工具創(chuàng)建的應(yīng)用程序可以避免那些麻煩的手工配置工作,react技術(shù)依賴webpack工具,這也是個(gè)技術(shù)

當(dāng)一切就緒好后,執(zhí)行npm start命令會(huì)啟動(dòng)一個(gè)本地開(kāi)發(fā)模式的服務(wù),同時(shí)會(huì)自動(dòng)的打開(kāi)一個(gè)網(wǎng)頁(yè),指向本地地止http://localhost:3000 如下圖所示：
[圖片上傳失敗...(image-a54a58-1571284426171)]

接下來(lái)用你喜歡的代碼編輯器打開(kāi)項(xiàng)目:這將是本節(jié)最重要的內(nèi)容

myfirstreactapp
├── package-lock.json // 鎖定安裝時(shí)的包的版本號(hào)络凿，并且需要上傳到git，以保證其他人在npm install時(shí)大家的依賴能保證一致,對(duì)整個(gè)文件的描述,為的是讓開(kāi)發(fā)者知道只要你保存了源文件，到一個(gè)新的機(jī)器上絮记、或者新的下載源摔踱，只要按照這個(gè)package-lock.json所標(biāo)示的具體版本下載依賴庫(kù)包，就能確保所有庫(kù)包與你上次安裝的完全一樣怨愤，它是npm install自動(dòng)生成的一文件
├── package.json // 對(duì)整個(gè)應(yīng)用程序的描述,應(yīng)用名稱,版本號(hào),一些依賴包,以及項(xiàng)目的啟動(dòng),打包派敷，測(cè)試配置，鎖定大版本
├── public
│   ├── favicon.ico  // icon圖標(biāo)
│   ├── index.html   // 主頁(yè)面,首頁(yè)模板
│   └── manifest.json // 定義成app應(yīng)用的方式來(lái)使用,快捷方式的圖標(biāo),可以配置icons撰洗，定義快捷方式的圖標(biāo),定義快捷方式跳轉(zhuǎn)的網(wǎng)址到哪里,主題顏色,用于指定應(yīng)用的顯示名稱篮愉、圖標(biāo)、應(yīng)用入口文件地址及需要使用的設(shè)備權(quán)限等信息差导，類似于android里面的manifest.xlm配置文件
├── README.md // 說(shuō)明文檔
└── src       // 源碼目錄
    ├── App.css // App應(yīng)用組件的樣式
    ├── App.js  // App應(yīng)用組件的邏輯代碼,構(gòu)成一個(gè)react組件的基本組成部分
    ├── App.test.js // App自動(dòng)化測(cè)試文件
    ├── index.css   // 首頁(yè)入口index的樣式
    ├── index.js    // 整個(gè)程序運(yùn)行的入口文件
    ├── logo.svg    // 圖標(biāo),資源
    └── serviceWorker.js // 引入這個(gè)是為了幫助我們借助網(wǎng)頁(yè)去寫(xiě)手機(jī)app應(yīng)用這樣的一個(gè)功能,如果上傳到https協(xié)議的服務(wù)器上,在斷網(wǎng)的情況下,依然可以看到之前的頁(yè)面

React中的組件

在react中一個(gè)重要的思想就是通過(guò)組件(Component)來(lái)開(kāi)發(fā)應(yīng)用,所謂組件,就是指能夠完成某個(gè)特定功能的獨(dú)立的,可重用的代碼(頁(yè)面中的某一部分)

基于組件的應(yīng)用開(kāi)發(fā)是廣泛使用的軟件開(kāi)發(fā)模式,用分而治之的方法,把一個(gè)大的應(yīng)用分解成若干個(gè)小的組件,每個(gè)組件只關(guān)注于某個(gè)小范圍的特定的功能,但是把組件組合起來(lái)试躏，就能夠構(gòu)成一個(gè)功能龐大的應(yīng)用

應(yīng)用只是一個(gè)會(huì)渲染其他組件的組件而已

也可以說(shuō),react應(yīng)用是由組件構(gòu)成的,你可以將組件理解為一種教瀏覽器認(rèn)識(shí)新的HTML標(biāo)簽的方式,實(shí)現(xiàn)組件的好處就是它拓展了原生HTML標(biāo)簽的功能,例如:組件之間的數(shù)據(jù)流等。

如果你有用過(guò)AngularJS的話,可以把組件理解為類似指令的概念,在現(xiàn)今的開(kāi)發(fā)模式里,基于組件化開(kāi)發(fā)是非常流行的

react非常適合構(gòu)建用戶交互組件

一個(gè)react應(yīng)用其實(shí)就是一顆由組件構(gòu)成的樹(shù)

在這顆樹(shù)的根結(jié)點(diǎn),最頂層的組件就是該應(yīng)用的本身,它會(huì)在瀏覽器啟動(dòng),也叫引導(dǎo)應(yīng)用的時(shí)候被渲染

由于組件都是以樹(shù)結(jié)構(gòu)組織起來(lái)的,當(dāng)每個(gè)組件被渲染時(shí),它都會(huì)遞歸地渲染下級(jí)組件

React特點(diǎn)

• 虛擬DOM

通過(guò)DOM diff算法,只會(huì)更新有差異化的部分,不用渲染整個(gè)頁(yè)面提高效率

• 組件化

把頁(yè)面分成若干個(gè)組件,組件中包含邏輯結(jié)構(gòu)和樣式
組件只包含自身邏輯,更新組件的時(shí)候可以預(yù)測(cè),利于維護(hù)整個(gè)頁(yè)面拆分多個(gè)組件,可以做到重用

• 單向數(shù)據(jù)流(父組件允許向子組件傳值,但是子組件你只能去使用父組件),子組件并不能直接的去改寫(xiě)這個(gè)值,只能單向的傳遞,但是你不能反過(guò)來(lái)的給我修改,想要達(dá)成這一目的,子組件調(diào)用父組件的方法,通過(guò)在父組件中改變自己來(lái)操作,維護(hù)代碼起來(lái)比較方便)
• 可以與其他框架并存(Jq,Angular等)
  數(shù)據(jù)是從頂層組件傳遞到子組件中
  數(shù)據(jù)可控

寫(xiě)一個(gè)react應(yīng)用的基本流程

其實(shí)不光是react還是vue,甚至是Angular,遵循的流程都是一樣的

基于產(chǎn)品經(jīng)理給的原型圖或者UI設(shè)計(jì)師提供的設(shè)計(jì)稿,首先要做的不是開(kāi)始寫(xiě)代碼,而是基于頁(yè)面,按照不同大小細(xì)粒度,把頁(yè)面拆分成若干個(gè)組件

對(duì)頁(yè)面的內(nèi)容進(jìn)行分組,并抽象成一個(gè)個(gè)的組件,從上至下,組合我們的應(yīng)用,從而構(gòu)成一個(gè)完整的軟件系統(tǒng)應(yīng)用

從creact-react-app腳手架中學(xué)到的

• 一切皆是js,以前講究是內(nèi)容(html),層疊樣式(css),行為(js)進(jìn)行分離,這種分離僅僅是物理層文件的分離,如果視為一個(gè)整體,那么css是可以和js一樣,通過(guò)模塊的形式嵌入到j(luò)s里面去的
• ,構(gòu)成組件的方式

總結(jié)

本文主要講到了react是什么,以及通過(guò)creact-react-app腳手架工具搭建一個(gè)react初始化的項(xiàng)目,其中初始化一個(gè)react應(yīng)用,有多種方式

其中最重要的是,初始化項(xiàng)目目錄文件的含義,以及構(gòu)建一個(gè)react組件的方式,以及react中的組件,react的特點(diǎn),寫(xiě)一個(gè)react應(yīng)用的基本流程,從一個(gè)初始化項(xiàng)目里,學(xué)到了react編程方式