第1章：React入門

1.1.React簡介

1.1.1 官網

1.英文官網: https://reactjs.org/
2.中文官網: https://react.docschina.org/

1.1.2介紹描述

1.用于動態構建用戶界面的 JavaScript 庫(只關注于視圖)
2.由Facebook開源

1.1.3React的特點

1.宣告式編碼
2.組件化編碼
3.React Native 撰寫原生應用
4.高效（優秀的Diffing演算法）

1.1.4React高效的原因

1.使用虛擬(virtual)DOM, 不總是直接操作頁面真實DOM，
2.DOM Diffing演算法, 最小化頁面重繪，

1.2.React的基本使用

1.2.1.效果

1.2.2.相關js庫

1.react.js：React核心庫，
2.react-dom.js：提供操作DOM的react擴展庫，
3.babel.min.js：決議JSX語法代碼轉為JS代碼的庫，

1.2.3.創建虛擬DOM的兩種方式

1.純JS方式(一般不用)
2.JSX方式

1.2.4.虛擬DOM與真實DOM

1.React提供了一些API來創建一種 “特別” 的一般js物件

const VDOM = React.createElement('xx',{id:'xx'},
'xx')

上面創建的就是一個簡單的虛擬DOM物件
2.虛擬DOM物件最終都會被React轉換為真實的DOM
3.我們編碼時基本只需要操作react的虛擬DOM相關資料, react會轉換為真實DOM變化而更新界，

1.3.React JSX

1.3.1.效果

1.3.2.JSX

1.全稱: JavaScript XML
2.react定義的一種類似于XML的JS擴展語法: JS + XML本質是React.createElement(component, props, …children)方法的語法糖
3.作用: 用來簡化創建虛擬DOM
1)寫法：var ele =

Hello JSX!

2)注意1：它不是字串, 也不是HTML/XML標簽
3)注意2：它最終產生的就是一個JS物件
4.標簽名任意: HTML標簽或其它標簽
5.標簽屬性任意: HTML標簽屬性或其它
6.基本語法規則
1)遇到 <開頭的代碼, 以標簽的語法決議: html同名標簽轉換為html同名元素, 其它標簽需要特別決議
2)遇到以 { 開頭的代碼，以JS語法決議: 標簽中的js運算式必須用{ }包含
7.babel.js的作用
1)瀏覽器不能直接決議JSX代碼, 需要babel轉譯為純JS的代碼才能運行
2)只要用了JSX，都要加上type=“text/babel”, 宣告需要babel來處理

1.3.3.渲染虛擬DOM(元素)

1.語法: ReactDOM.render(virtualDOM, containerDOM)
2.作用: 將虛擬DOM元素渲染到頁面中的真實容器DOM中顯示
3.引數說明
1)引數一: 純js或jsx創建的虛擬dom物件
2)引數二: 用來包含虛擬DOM元素的真實dom元素物件(一般是一個div)

1.3.4.JSX練習

需求: 動態展示如下串列

1.4.模塊與組件、模塊化與組件化的理解

1.4.1.模塊

1.理解：向外
2.理解
3.提供特定功能的js程式, 一般就是一個js檔案
4.為什么要拆成模塊：隨著業務邏輯增加，代碼越來越多且復雜，
5.作用：復用js, 簡化js的撰寫, 提高js運行效率

1.4.2.組件

1.理解：用來實作區域功能效果的代碼和資源的集合(html/css/js/image等等)
2.為什么要用組件： 一個界面的功能更復雜
3.作用：復用編碼, 簡化專案編碼, 提高運行效率

1.4.3.模塊化

當應用的js都以模塊來撰寫的, 這個應用就是一個模塊化的應用

1.4.4.組件化

當應用是以多組件的方式實作, 這個應用就是一個組件化的應用

第2章：React面向組件編程

2.1. 基本理解和使用

2.1.1. 使用React開發者工具除錯

2.1.2. 效果

函式式組件：

類式組件：

2.1.3. 注意

1.組件名必須首字母大寫
2.虛擬DOM元素只能有一個根元素
3.虛擬DOM元素必須有結束標簽

2.1.4. 渲染類組件標簽的基本流程

1.React內部會創建組件實體物件
2.呼叫render()得到虛擬DOM, 并決議為真實DOM
3.插入到指定的頁面元素內部
2.2. 組件三大核心屬性1: state

2.2.1. 效果

需求: 定義一個展示天氣資訊的組件
1.默認展示天氣炎熱 或 涼爽
2.點擊文字切換天氣

2.2.2. 理解

1.state是組件物件最重要的屬性, 值是物件(可以包含多個key-value的組合)
2.組件被稱為"狀態機", 通過更新組件的state來更新對應的頁面顯示(重新渲染組件)

2.2.3. 強烈注意

1.組件中render方法中的this為組件實體物件
2.組件自定義的方法中this為undefined，如何解決？
a)強制系結this: 通過函式物件的bind()
b)箭頭函式
3.狀態資料，不能直接修改或更新

2.3. 組件三大核心屬性2: props

2.3.1. 效果

需求: 自定義用來顯示一個人員資訊的組件
1.姓名必須指定，且為字串型別；
2.性別為字串型別，如果性別沒有指定，默認為男
3.年齡為字串型別，且為數字型別，默認值為18

2.3.2. 理解

1.每個組件物件都會有props(properties的簡寫)屬性
2.組件標簽的所有屬性都保存在props中

2.3.3. 作用

1.通過標簽屬性從組件外向組件內傳遞變化的資料
2.注意: 組件內部不要修改props資料

2.3.4. 編碼操作

1.內部讀取某個屬性值

this.props.name

2.對props中的屬性值進行型別限制和必要性限制
第一種方式（React v15.5 開始已棄用）：

Person.propTypes = {
 name: React.PropTypes.string.isRequired,
 age: React.PropTypes.number
}

3.擴展屬性: 將物件的所有屬性通過props傳遞

<Person {...person}/>

4.默認屬性值：

Person.defaultProps = {
  age: 18,
  sex:'男'
}

5.組件類的建構式

constructor(props){
  super(props)
  console.log(props)//列印所有屬性
}

2.4. 組件三大核心屬性3: refs與事件處理

2.4.1. 效果

需求: 自定義組件, 功能說明如下:

1. 點擊按鈕, 提示第一個輸入框中的值
2. 當第2個輸入框失去焦點時, 提示這個輸入框中的值

2.4.2. 理解

組件內的標簽可以定義ref屬性來標識自己

2.4.3. 編碼

1.字串形式的ref

<input ref="input1"/>

2.回呼形式的ref

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

3.createRef創建ref容器·

myRef = React.createRef() 
<input ref={this.myRef}/>

2.4.4. 事件處理

1.通過onXxx屬性指定事件處理函式(注意大小寫)
1)React使用的是自定義(合成)事件, 而不是使用的原生DOM事件
2)React中的事件是通過事件委托方式處理的(委托給組件最外層的元素)
2.通過event.target得到發生事件的DOM元素物件

2.5. 收集表單資料

2.5.1. 效果

需求: 定義一個包含表單的組件
輸入用戶名密碼后, 點擊登錄提示輸入資訊

2.5.2. 理解

包含表單的組件分類
1.受控組件
2.非受控組件

2.6. 組件的生命周期

2.6.1. 效果

需求:定義組件實作以下功能：

1. 讓指定的文本做顯示 / 隱藏的漸變影片
2. 從完全可見，到徹底消失，耗時2S
3. 點擊“不活了”按鈕從界面中卸載組件

2.6.2. 理解

1.組件從創建到死亡它會經歷一些特定的階段，
2.React組件中包含一系列勾子函式(生命周期回呼函式), 會在特定的時刻呼叫，
3.我們在定義組件時，會在特定的生命周期回呼函式中，做特定的作業，

2.6.3. 生命周期流程圖(舊)

生命周期的三個階段（舊）
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()

2.6.4. 生命周期流程圖(新)

生命周期的三個階段（新）

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()

2.6.5. 重要的勾子

1.render：初始化渲染或更新渲染呼叫
2.componentDidMount：開啟監聽, 發送ajax請求
3.componentWillUnmount：做一些收尾作業, 如: 清理定時器

2.6.6. 即將廢棄的勾子

1.componentWillMount
2.componentWillReceiveProps
3.componentWillUpdate
現在使用會出現警告，下一個大版本需要加上UNSAFE_前綴才能使用，以后可能會被徹底廢棄，不建議使用，

2.7. 虛擬DOM與DOM Diffing演算法

2.7.1. 效果

需求：驗證虛擬DOM Diffing演算法的存在

2.7.2. 基本原理圖

第3章：React應用(基于React腳手架)

3.1. 使用create-react-app創建react應用

3.1.1. react腳手架

1.xxx腳手架: 用來幫助程式員快速創建一個基于xxx庫的模板專案
1.包含了所有需要的配置（語法檢查、jsx編譯、devServer…）
2.下載好了所有相關的依賴
3.可以直接運行一個簡單效果
2.react提供了一個用于創建react專案的腳手架庫: create-react-app
3.專案的整體技術架構為: react + webpack + es6 + eslint
4.使用腳手架開發的專案的特點: 模塊化, 組件化, 工程化

3.1.2. 創建專案并啟動

第一步，全域安裝：npm i -g create-react-app
第二步，切換到想創專案的目錄，使用命令：create-react-app hello-react
第三步，進入專案檔案夾：cd hello-react
第四步，啟動專案：npm start

3.1.3. react腳手架專案結構

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庫的支持)

3.1.4. 功能界面的組件化編碼流程（通用）

1. 拆分組件: 拆分界面,抽取組件
2. 實作靜態組件: 使用組件實作靜態頁面效果
3. 實作動態組件

3.1 動態顯示初始化資料

3.1.1 資料型別

3.1.2 資料名稱

3.1.2 保存在哪個組件?

3.2 互動(從系結事件監聽開始)

3.2. 組件的組合使用-TodoList

功能: 組件化實作此功能

1. 顯示所有todo串列
2. 輸入文本, 點擊按鈕顯示到串列的首位, 并清除輸入的文本

3.1.4. 功能界面的組件化編碼流程（通用）

1. 拆分組件: 拆分界面,抽取組件
2. 實作靜態組件: 使用組件實作靜態頁面效果
3. 實作動態組件

3.1 動態顯示初始化資料

3.1.1 資料型別

3.1.2 資料名稱

3.1.2 保存在哪個組件?

3.2 互動(從系結事件監聽開始)

3.2. 組件的組合使用-TodoList

功能: 組件化實作此功能

1. 顯示所有todo串列
2. 輸入文本, 點擊按鈕顯示到串列的首位, 并清除輸入的文本

第4章：React ajax

4.1. 理解

4.1.1. 前置說明

1.React本身只關注于界面, 并不包含發送ajax請求的代碼
2.前端應用需要通過ajax請求與后臺進行互動(json資料)
3.react應用中需要集成第三方ajax庫(或自己封裝)

4.1.2. 常用的ajax請求庫

1.jQuery: 比較重, 如果需要另外引入不建議使用
2.axios: 輕量級, 建議使用
1)封裝XmlHttpRequest物件的ajax
2) promise風格
3)可以用在瀏覽器端和node服務器端

4.2. axios

4.2.1. 檔案

https://github.com/axios/axios
4.2.2. 相關API
1)GET請求

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請求

axios.post('/user', {
  firstName: 'Fred',
  lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});

4.3. 案例—github用戶搜索

4.3.1. 效果

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

4.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) //發布訊息

4.5. 擴展：Fetch

4.5.1. 檔案

1.https://github.github.io/fetch/
2.https://segmentfault.com/a/1190000003810652

4.5.2. 特點

1.fetch: 原生函式，不再使用XmlHttpRequest物件提交ajax請求
2.老版本瀏覽器可能不支持

4.5.3. 相關API

1)GET請求

fetch(url).then(function(response) {
    return response.json()
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  });

2)POST請求

  fetch(url, {
    method: "POST",
    body: JSON.stringify(data),
  }).then(function(data) {
    console.log(data)
  }).catch(function(e) {
    console.log(e)
  })

第5章：React路由

5.1. 相關理解

5.1.1. SPA的理解

1.單頁Web應用（single page web application，SPA），
2.整個應用只有一個完整的頁面，
3.點擊頁面中的鏈接不會重繪頁面，只會做頁面的區域更新，
4.資料都需要通過ajax請求獲取, 并在前端異步展現，

5.1.2. 路由的理解

1.什么是路由?
1.一個路由就是一個映射關系(key:value)
2.key為路徑, value可能是function或component
2.路由分類
1.后端路由：
1)理解： value是function, 用來處理客戶端提交的請求，
2)注冊路由： router.get(path, function(req, res))
3)作業程序：當node接收到一個請求時, 根據請求路徑找到匹配的路由, 呼叫路由中的函式來處理請求, 回傳回應資料
2.前端路由：
1)瀏覽器端路由，value是component，用于展示頁面內容，
2)注冊路由:
3)作業程序：當瀏覽器的path變為/test時, 當前路由組件就會變為Test組件

5.1.3. react-router-dom的理解

1.react的一個插件庫，
2.專門用來實作一個SPA應用，
3.基于react的專案基本都會用到此庫，

5.2. react-router-dom相關API

5.2.1. 內置組件

1.
2.
3.
4.
5.
6.
7.

5.2.2. 其它

1.history物件
2.match物件
3.withRouter函式

5.3. 基本路由使用

5.3.1. 效果

5.3.2. 準備

1.下載react-router-dom: npm install --save react-router-dom
2.引入bootstrap.css:

5.4. 嵌套路由使用

效果

5.5. 向路由組件傳遞引數資料

效果

5.6. 多種路由跳轉方式

效果

第6章：React UI組件庫

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

6.1.1. material-ui(國外)

1.官網: http://www.material-ui.com/#/
2.github: https://github.com/callemall/material-ui

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

1.官網: https://ant.design/index-cn
2.Github: https://github.com/ant-design/ant-design/

7.1. redux理解

7.1.1. 學習檔案

1.英文檔案: https://redux.js.org/
2.中文檔案: http://www.redux.org.cn/
3.Github: https://github.com/reactjs/redux

7.1.2. redux是什么

1.redux是一個專門用于做狀態管理的JS庫(不是react插件庫)，
2.它可以用在react, angular, vue等專案中, 但基本與react配合使用，
3.作用: 集中式管理react應用中多個組件共享的狀態，

7.1.3. 什么情況下需要使用redux

1.某個組件的狀態，需要讓其他組件可以隨時拿到（共享），
2.一個組件需要改變另一個組件的狀態（通信），
3.總體原則：能不用就不用, 如果不用比較吃力才考慮使用，

7.1.4. redux作業流程

7.2. redux的三個核心概念

7.2.1. action

1.動作的物件
2.包含2個屬性
type：標識屬性, 值為字串, 唯一, 必要屬性
data：資料屬性, 值型別任意, 可選屬性
3.例子：

{ type: 'ADD_STUDENT',data:{name: 'tom',age:18} }

7.2.2. reducer

1.用于初始化狀態、加工狀態，
2.加工時，根據舊的state和action， 產生新的state的純函式，

7.2.3. store

1.將state、action、reducer聯系在一起的物件
2.如何得到此物件?
1)import {createStore} from ‘redux’
2)import reducer from ‘./reducers’
3)const store = createStore(reducer)
3.此物件的功能?
1)getState(): 得到state
2)dispatch(action): 分發action, 觸發reducer呼叫, 產生新的state
3)subscribe(listener): 注冊監聽, 當產生了新的state時, 自動呼叫

7.3. redux的核心API

7.3.1. createstore()

作用：創建包含指定reducer的store物件

7.3.2. store物件

1.作用: redux庫最核心的管理物件
2.它內部維護著:
1)state
2)reducer
3.核心方法:
1)getState()
2)dispatch(action)
3)subscribe(listener)
4.具體編碼:
1)store.getState()
2)store.dispatch({type:‘INCREMENT’, number})
3)store.subscribe(render)

7.3.3. applyMiddleware()

作用：應用上基于redux的中間件(插件庫)

7.3.4. combineReducers()

作用：合并多個reducer函式

7.4. 使用redux撰寫應用

效果

7.5. redux異步編程

7.5.1理解：

1.redux默認是不能進行異步處理的,
2.某些時候應用中需要在redux中執行異步任務(ajax, 定時器)

7.5.2. 使用異步中間件

npm install --save redux-thunk

7.6. react-redux

7.6.1. 理解

1.一個react插件庫
2.專門用來簡化react應用中使用redux

7.6.2. react-Redux將所有組件分成兩大類

1.UI組件
1)只負責 UI 的呈現，不帶有任何業務邏輯
2)通過props接收資料(一般資料和函式)
3)不使用任何 Redux 的 API
4)一般保存在components檔案夾下
2.容器組件
1)負責管理資料和業務邏輯，不負責UI的呈現
2)使用 Redux 的 API
3)一般保存在containers檔案夾下

7.6.3. 相關API

1.Provider：讓所有組件都可以得到state資料

<Provider store={store}>
  <App />
</Provider>

2.connect：用于包裝 UI 組件生成容器組件

import { connect } from 'react-redux'
  connect(
    mapStateToprops,
    mapDispatchToProps
  )(Counter)

3.mapStateToprops：將外部的資料（即state物件）轉換為UI組件的標簽屬性

const mapStateToprops = function (state) {
  return {
    value: state
  }
}

4.mapDispatchToProps：將分發action的函式轉換為UI組件的標簽屬性

7.7. 使用上redux除錯工具

7.7.1. 安裝chrome瀏覽器插件

7.7.2. 下載工具依賴包

npm install --save-dev redux-devtools-extension

7.8. 純函式和高階函式

7.8.1. 純函式

1.一類特別的函式: 只要是同樣的輸入(實參)，必定得到同樣的輸出(回傳)
2.必須遵守以下一些約束
1)不得改寫引數資料
2)不會產生任何副作用，例如網路請求，輸入和輸出設備
3)不能呼叫Date.now()或者Math.random()等不純的方法
3.redux的reducer函式必須是一個純函式

7.8.2. 高階函式

1.理解: 一類特別的函式
1)情況1: 引數是函式
2)情況2: 回傳是函式
2.常見的高階函式:
1)定時器設定函式
2)陣列的forEach()/map()/filter()/reduce()/find()/bind()
3)promise
4)react-redux中的connect函式
3.作用: 能實作更加動態, 更加可擴展的功能

總結

我是歌謠 放棄很容易 但是堅持一定很酷 最好的種樹是十年前 其次是現在