React基礎

一、React簡介

1.1 React是什麼

主要職能：

1、發送請求獲取數據

2、處理數據(過濾、整理格式等)

3、操作DOM呈現介面

定義：
React是一個將數據渲染為HTML視圖的開源JavaScript庫

 

1.2發展史

 

1.3為什麼要學

痛點：

 

1.4 React的特點

1.5學習React之前你要掌握的JavaScript基礎知識

判斷this的指向
class(類)
ES6語法規範
npm包管理器
原型、原型鏈
數組常用方法
模組化

1.6 React項目初始化

創建JavaScript項目

1
2
3

npx create-react-app my-app

創建TypeScript項目

1

npx create-react-app my-app --template typescript

 
 
 

##二、虛擬DOM的兩種創建管道

js創建

jsx創建

##三、Jsx語法規則與練習

全稱：JavaScript XML
React定義的一種類似於XML的JS拓展語法，JS-XML

本質是React.createElement(component,props,…children)方法的語法糖

Jsx語法規則：
1、定義虛擬DOM時，不要寫引號
2、標籤中混入JS運算式時要使用花括弧{}
3、樣式的類名指定不要用class，要用className
4、內聯樣式，要用style={key:value}的形式去寫
5、只有一個根標籤
6、標籤必須要閉合
7、標籤首字母

(1)若小寫字母開頭，則將該標籤轉為html中的同名元素，若html中無該標籤對應的同名元素，則

(2)若大寫字母開頭，React就去渲染對應的組件，若組件沒有定義，則報錯

一定要區分【js程式碼】和【js運算式】

##四、模塊與組件、模組化與組件化

4.1模塊

理解：向外提供特定功能的js程式，一般就是一個js檔案
為什麼要拆成模塊：隨著業務邏輯的新增，程式碼越來越多且複雜

作用：複用js，簡化js的編寫，提高js運行效率

 

4.2組件

理解：用來實現局部功能效果的程式碼和資源的集合(html/css/js/image等)
為什麼：一個介面的功能更複雜
作用：複用編碼，簡化項目編碼，提供運行效率

4.3模組化

當應用的js都以模塊來編寫的，這個應用就是一個模組化的應用

4.4組件化

當應用是以多組件的管道實現，這個應用就是一個組件化的應用

##五、面向組件程式設計

5.1基本理解和使用

5.1.1效果

函數式組件：

類式組件：

簡單組件

不帶搆造函數的組件

複雜組件：

帶state的搆造函數的組件

 

5.1.2注意點：

1.組件名必須首字母大寫

2.虛擬DOM元素只能有一個根元素

3.虛擬DOM元素必須有結束標籤

5.1.3渲染類組件標籤的基本流程

1. React內部會創建組件實例對象
   2.調用render()得到虛擬DOM，並解析為真實DOM
   3.插入到指定的頁面元素內部
    
    

5.2組件的三大覈心内容

5.2.1 state

理解：

1. state是組件對象最重要的内容，值是對象(可以包含多個key-value的組合)
2. 2.組件被稱為“狀態機”，通過更新組件的state來更新對應的頁面顯示(重新渲染組件)

 
注意事項：

1.組件中render方法中的this為組件實例對象
2.組件自定義的方法中this為undefined，如何解决？

 a)強制綁定this:通過函數對象的bind()

 b)箭頭函數

3.狀態數據，不能直接修改或更新

5.2.2 props

理解：
1.每個組件對象都會有props(properties的簡寫)内容

2.組件標籤的所有内容都保存在props中

 

作用：
1.通過標籤内容從組件外向組件內傳遞變化的數據

2.注意：組件內部不要修改props數據

 

程式碼實現：

需要引入prop-types庫

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// Person是一個類組件，這個方法是限制輸入參數的內容

Person. propTypes = {

    name: PropTypes.string.isRequired,

    age: PropTypes.number
}



//設定參數預設值

Person. defaultProps = {

sex: '男',

age: 18

}

或者採用如下方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

class Person extends React.Component{



static propTypes = {



}



static defaultProps = {



}



}

5.2.3 refs與事件處理

理解：

1.組件內的標籤可以定義ref内容來標識自己

 

事件處理：

1.通過onXxx内容指定事件處理函數(注意大小寫)

  1)React使用的是自定義(合成)事件，而不是使用的原生DOM事件

  2)React中的事件是通過事件委託管道處理的(委託給組件最外層的元素)

2.通過event.target得到發生事件的DOM元素對象(不要過渡使用ref)

 

ref類型

1.字串形式的ref

1
2
3

<input ref= "input1 "/>

2.回檔形式的ref

1
2
3

<input ref={(c)=> {this.input1 = c}} />

3. createRef創建ref容器

1
2
3
4
5
6
7

myRef = React.createRef()



<input ref={this.myRef} />

 

注意：

ref的string準備淘汰

 

 

5.3收集表單數據

理解：

包含表單的組件分類

1.受控組件

   1)受控組件依賴於狀態

   2)受控組件的修改會實时映射到狀態值上，此時可以對輸入的內容進行校驗

   3)受控組件只有繼承React.Component才會有狀態

   4)受控組件必須要在表單上使用onChange事件來綁定對應的事件

2.非受控組件

   1)非受控組件不受狀態的控制

   2)非受控組件獲取數據就是相當於操作DOM

   3)非受控組件可以很容易和協力廠商組件結合，更容易同時集成React和非React程式碼

 

高階函數：如果一個函數符合下麵2個規範中的任何一個，那該函數就是高階函數。

  1)若A函數，接收的參數是一個函數，那麼A就可以稱之為高階函數。

  2)若A函數，調用的返回值依然是一個函數，那麼A就可以稱之為高階函數。

 

函數的柯裡化：通過函數調用繼續返回函數的管道，實現多次接收參數最後統一處理的函數編碼形式。

 

 

5.4組件的生命週期

5.4.1理解：

1.組件從創建到死亡它會經歷一些特定的階段。

2. React組件中包含一系列勾子函數(生命週期回呼函數)，會在特定的時刻調用。

3.我們在定義組件時，會在特定的生命週期回呼函數中，做特定的工作。

 

5.4.2生命週期流程圖

舊圖：

生命週期的三個階段(舊)

1.初始化階段：由ReactDOM.render()觸發—初次渲染

  1)constructor()

  2)componentWillMount()

  3)render()

  4)componentDidMount()

2.更新階段：由組件內部this.setSate()或父組件重新render觸發

  1)shouldComponentUpdate()

  2)componentWillUpdate()

  3)render()

  4)componentDidUpdate()

3.卸載組件：由ReactDOM.unmountComponentAtNode()觸發

  1)componentWillUnmount()

 

新圖：

生命週期的三個階段(新)

1.初始化階段：由ReactDOM.render()觸發—初次渲染

  1)constructor()

  2)getDerivedStateFromProps

  3)render()

  4)componentDidMount()

2.更新階段：由組件內部this.setSate()或父組件重新render觸發

  1)getDerivedStateFromProps

  2)shouldComponentUpdate()

  3)render()

  4)getSnapshotBeforeUpdate

  5)componentDidUpdate()

3.卸載組件：由ReactDOM.unmountComponentAtNode()觸發

  1)componentWillUnmount()

 

5.4.3重要的鉤子

1.render：初始化渲染或更新渲染調用

2.componentDidMount：開啟監聽，發送ajax請求

3.componentWillUnmount：做一些收尾工作，如：清理計时器

 

5.4.4即將廢棄的鉤子

1.componentWillMount

2.componentWillReceiveProps

3.componentWillUpdate

現在使用會出現警告，下一個大版本需要加上UNSAFE_ 首碼才能使用，以後可能會被徹底廢棄，不建議使用。

5.5虛擬DOM與Dom Diffing算灋

##六、React應用(基於React脚手架)

6.1 react脚手架

1. xxx脚手架：用來幫助程式師快速創建一個基於xxx庫的範本項目

  1)包含了所有需要的配寘(語法檢查、jsx編譯、devServer…)

  2)下載好了所有相關的依賴

  3)可以直接運行一個簡單效果

2. react提供了一個用於創建react項目的脚手架庫：create-react-app

3.項目的整體科技架構為：react + webpack + es6 + eslint

4.使用脚手架開發的項目的特點：模組化，組件化，工程化

6.2.創建項目並啟動

第一步，全域安裝：npm i -g create-react-app

第二步，切換到想創項目的目錄，使用命令：create-react-app hello-react

第三步，進入項目資料夾：cd hello-react

第四步，啟動項目：npm start

6.3 react脚手架項目結構

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

public ----靜態資源資料夾

favicon. icon ------網站頁簽圖標

index. html --------主頁面

logo192.png ------- logo圖

logo512.png ------- logo圖

manifest.json -----應用加殼的設定檔

robots. txt --------爬蟲協定檔案

src ----源碼資料夾

App.css -------- App組件的樣式

App.js --------- App組件

App.test.js ----用於給App做測試

index.css ------樣式

index.js -------入口檔案

logo.svg ------- logo圖

reportWebVitals.js

---頁面效能分析檔案(需要web-vitals庫的支持)

setupTests.js

----組件單元測試的檔案(需要jest-dom庫的支持)

6.4功能介面的組件化編碼流程(通用)

1.折開組件：折開介面，抽取組件

2.實現靜態組件：使用組件實現靜態頁面效果

3.實現動態組件

  1)動態顯示初始化數據

   (1)資料類型

   (2)數據名稱

   (3)保存在哪個組件？

  2)互動(從綁定事件監聽開始)

 

 

 

##七、React Ajax

7.1.理解

7.1.1.前置說明

1.React本身只關注於介面，並不包含發送ajax請求的程式碼

2.前端應用需要通過ajax請求與後臺進行互動(json數據)

3.react應用中需要集成協力廠商ajax庫(或自己封裝)

7.1.2.常用的ajax請求庫

1.jQuery:比較重，如果需要另外引入不建議使用

2.axios:羽量級，建議使用

1)封裝XmlHttpRequest對象的ajax

2)promise風格

3)可以用在瀏覽器端和node伺服器端

7.2. axios

7.2.1.檔案

https://github.com/axios/axios

7.2.2.相關API

1)GET請求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

axios.get('/user？ID=12345')

  .then(function (response) {

    console.log(response.data);

  })

  .catch(function (error) {

    console.log(error);

  });

axios.get('/user', {

    params: {

      ID: 12345

    }

  })

  .then(function (response) {

    console.log(response);

  })

  .catch(function (error) {

    console.log(error);

  });

2)POST請求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

axios.post('/user', {

  firstName: 'Fred',

  lastName: 'Flintstone'

})

.then(function (response) {

console.log(response);

})

.catch(function (error) {

console.log(error);

});

7.3.案例—github用戶蒐索

7.3.1.效果

請求地址： https://api.github.com/search/users?q=xxxxxx

7.4.消息訂閱-發佈機制

1.工具庫：PubSubJS

2.下載：npm install pubsub-js –save

3.使用：

1)import PubSub from ‘pubsub-js’ //引入

2)PubSub. subscribe(‘delete’,function(data){ });// 訂閱

3)PubSub. publish(‘delete’,data)//發佈消息

7.5.擴展：Fetch

7.5.1.檔案

1. https://github.github.io/fetch/

2. https://segmentfault.com/a/1190000003810652

7.5.2.特點

1.fetch:原生函數，不再使用XmlHttpRequest對象提交ajax請求

2.老版本瀏覽器可能不支持

7.5.3.相關API

1)GET請求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

fetch(url).then(function(response) {

    return response.json()

  }).then(function(data) {

    console.log(data)

  }).catch(function(e) {

    console.log(e)

  });

2)POST請求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

fetch(url, {

  method:  "POST ",

  body: JSON.stringify(data),

}).then(function(data) {

  console.log(data)

}).catch(function(e) {

  console.log(e)

})

 

 

 

##八、React路由

8.1.相關理解

8.1.1. SPA的理解

1.單頁Web應用(single page web application,SPA)。

2.整個應用只有一個完整的頁面。

3.點擊頁面中的連結不會刷新頁面,只會做頁面的局部更新。

4.數據都需要通過ajax請求獲取，並在前端非同步展現。

8.1.2.路由的理解

什麼是路由？

1、一個路由就是一個映射關係(key:value)

2、key為路徑，value可能是function或component

 

路由分類

1.後端路由：

  1)理解：value是function，用來處理用戶端提交的請求。

  2)注册路由：router. get(path,function(req,res))

  3)工作過程：當node接收到一個請求時，根據請求路徑找到匹配的路由，調用路由中的函數來處理請求，返回響應數據

2.前端路由：

  1)瀏覽器端路由，value是component，用於展示頁面內容。

&emsp; 2)注册路由：<Route path= “/test “component={Test}>

&emsp; 3)工作過程：當瀏覽器的path變為/test時，當前路由組件就會變為Test組件

8.1.3 react-router-dom的理解

1.react的一個挿件庫。

2.專門用來實現一個SPA應用。

3.基於react的項目基本都會用到此庫。

8.2. react-router-dom相關API

8.2.1.內寘組件

8.2.2.其它

1. history對象

2. match對象

3. withRouter函數

8.3.基本路由使用

8.3.1.效果

8.3.2.準備

1.下載react-router-dom: npm install –save react-router-dom

2.引入bootstrap.css: <link rel=”stylesheet “href= “/css/bootstrap.css”>

&nbsp;

8.4.嵌套路由使用

&nbsp;

8.5.向路由組件傳遞參數數據

&nbsp;

8.6.多種路由跳轉管道

&nbsp;
&nbsp;
&nbsp;

##九、React UI組件庫

9.1.流行的開源React UI組件庫

9.1.1. material-ui(國外)

1.官網： http://www.material-ui.com/#/

2. github: https://github.com/callemall/material-ui

9.1.2. ant-design(國內螞蟻金服)

1.官網： https://ant.design/index-cn

2. Github: https://github.com/ant-design/ant-design/

&nbsp;
&nbsp;
&nbsp;

• ← Previous Post
• Next Post →