第1章：React入門

1.1.React簡介

1.1.1 官網(wǎng)

1.英文官網(wǎng): https://reactjs.org/
2.中文官網(wǎng): https://react.docschina.org/

1.1.2介紹描述

1.用于動態(tài)構(gòu)建用戶界面的 JavaScript 庫(只關(guān)注于視圖)
2.由Facebook開源

1.1.3React的特點

1.聲明式編碼
2.組件化編碼
3.React Native 編寫原生應(yīng)用
4.高效（優(yōu)秀的Diffing算法）

1.1.4React高效的原因

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

1.2.React的基本使用

1.2.1.效果

1.2.2.相關(guān)js庫

1.react.js：React核心庫。
2.react-dom.js：提供操作DOM的react擴展庫。
3.babel.min.js：解析JSX語法代碼轉(zhuǎn)為JS代碼的庫。

1.2.3.創(chuàng)建虛擬DOM的兩種方式

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

1.2.4.虛擬DOM與真實DOM

1.React提供了一些API來創(chuàng)建一種 “特別” 的一般js對象

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

上面創(chuàng)建的就是一個簡單的虛擬DOM對象
2.虛擬DOM對象最終都會被React轉(zhuǎn)換為真實的DOM
3.我們編碼時基本只需要操作react的虛擬DOM相關(guān)數(shù)據(jù), react會轉(zhuǎn)換為真實DOM變化而更新界。

1.3.React JSX

1.3.1.效果

1.3.2.JSX

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

Hello JSX!

2)注意1：它不是字符串, 也不是HTML/XML標(biāo)簽
3)注意2：它最終產(chǎn)生的就是一個JS對象
4.標(biāo)簽名任意: HTML標(biāo)簽或其它標(biāo)簽
5.標(biāo)簽屬性任意: HTML標(biāo)簽屬性或其它
6.基本語法規(guī)則
1)遇到 <開頭的代碼, 以標(biāo)簽的語法解析: html同名標(biāo)簽轉(zhuǎn)換為html同名元素, 其它標(biāo)簽需要特別解析
2)遇到以 { 開頭的代碼，以JS語法解析: 標(biāo)簽中的js表達(dá)式必須用{ }包含
7.babel.js的作用
1)瀏覽器不能直接解析JSX代碼, 需要babel轉(zhuǎn)譯為純JS的代碼才能運行
2)只要用了JSX，都要加上type=“text/babel”, 聲明需要babel來處理

1.3.3.渲染虛擬DOM(元素)

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

1.3.4.JSX練習(xí)

需求: 動態(tài)展示如下列表

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

1.4.1.模塊

1.理解：向外
2.理解
3.提供特定功能的js程序, 一般就是一個js文件
4.為什么要拆成模塊：隨著業(yè)務(wù)邏輯增加，代碼越來越多且復(fù)雜。
5.作用：復(fù)用js, 簡化js的編寫, 提高js運行效率

1.4.2.組件

1.理解：用來實現(xiàn)局部功能效果的代碼和資源的集合(html/css/js/image等等)
2.為什么要用組件： 一個界面的功能更復(fù)雜
3.作用：復(fù)用編碼, 簡化項目編碼, 提高運行效率

1.4.3.模塊化

當(dāng)應(yīng)用的js都以模塊來編寫的, 這個應(yīng)用就是一個模塊化的應(yīng)用

1.4.4.組件化

當(dāng)應(yīng)用是以多組件的方式實現(xiàn), 這個應(yīng)用就是一個組件化的應(yīng)用

第2章：React面向組件編程

2.1. 基本理解和使用

2.1.1. 使用React開發(fā)者工具調(diào)試

2.1.2. 效果

函數(shù)式組件：

類式組件：

2.1.3. 注意

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

2.1.4. 渲染類組件標(biāo)簽的基本流程

1.React內(nèi)部會創(chuàng)建組件實例對象
2.調(diào)用render()得到虛擬DOM, 并解析為真實DOM
3.插入到指定的頁面元素內(nèi)部
2.2. 組件三大核心屬性1: state

2.2.1. 效果

需求: 定義一個展示天氣信息的組件
1.默認(rèn)展示天氣炎熱 或 涼爽
2.點擊文字切換天氣

2.2.2. 理解

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

2.2.3. 強烈注意

1.組件中render方法中的this為組件實例對象
2.組件自定義的方法中this為undefined，如何解決？
a)強制綁定this: 通過函數(shù)對象的bind()
b)箭頭函數(shù)
3.狀態(tài)數(shù)據(jù)，不能直接修改或更新

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

2.3.1. 效果

需求: 自定義用來顯示一個人員信息的組件
1.姓名必須指定，且為字符串類型；
2.性別為字符串類型，如果性別沒有指定，默認(rèn)為男
3.年齡為字符串類型，且為數(shù)字類型，默認(rèn)值為18

2.3.2. 理解

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

2.3.3. 作用

1.通過標(biāo)簽屬性從組件外向組件內(nèi)傳遞變化的數(shù)據(jù)
2.注意: 組件內(nèi)部不要修改props數(shù)據(jù)

2.3.4. 編碼操作

1.內(nèi)部讀取某個屬性值

this.props.name

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

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

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

<Person {...person}/>

4.默認(rèn)屬性值：

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

5.組件類的構(gòu)造函數(shù)

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

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

2.4.1. 效果

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

點擊按鈕, 提示第一個輸入框中的值

當(dāng)?shù)?個輸入框失去焦點時, 提示這個輸入框中的值

2.4.2. 理解

組件內(nèi)的標(biāo)簽可以定義ref屬性來標(biāo)識自己

2.4.3. 編碼

1.字符串形式的ref

<input ref="input1"/>

2.回調(diào)形式的ref

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

3.createRef創(chuàng)建ref容器·

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

2.4.4. 事件處理

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

2.5. 收集表單數(shù)據(jù)

2.5.1. 效果

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

2.5.2. 理解

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

2.6. 組件的生命周期

2.6.1. 效果

需求:定義組件實現(xiàn)以下功能：

讓指定的文本做顯示 / 隱藏的漸變動畫

從完全可見，到徹底消失，耗時2S

點擊“不活了”按鈕從界面中卸載組件

2.6.2. 理解

1.組件從創(chuàng)建到死亡它會經(jīng)歷一些特定的階段。
2.React組件中包含一系列勾子函數(shù)(生命周期回調(diào)函數(shù)), 會在特定的時刻調(diào)用。
3.我們在定義組件時，會在特定的生命周期回調(diào)函數(shù)中，做特定的工作。

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

生命周期的三個階段（舊）
1. 初始化階段: 由ReactDOM.render()觸發(fā)—初次渲染
1.constructor()
2.componentWillMount()
3.render()
4.componentDidMount()
2. 更新階段: 由組件內(nèi)部this.setSate()或父組件重新render觸發(fā)
1.shouldComponentUpdate()
2.componentWillUpdate()
3.render()
4.componentDidUpdate()
3. 卸載組件: 由ReactDOM.unmountComponentAtNode()觸發(fā)
1.componentWillUnmount()

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

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

初始化階段: 由ReactDOM.render()觸發(fā)—初次渲染
1.constructor()
2.getDerivedStateFromProps
3.render()
4.componentDidMount()

更新階段: 由組件內(nèi)部this.setSate()或父組件重新render觸發(fā)
1.getDerivedStateFromProps
2.shouldComponentUpdate()
3.render()
4.getSnapshotBeforeUpdate
5.componentDidUpdate()

卸載組件: 由ReactDOM.unmountComponentAtNode()觸發(fā)
1.componentWillUnmount()

2.6.5. 重要的勾子

1.render：初始化渲染或更新渲染調(diào)用
2.componentDidMount：開啟監(jiān)聽, 發(fā)送ajax請求
3.componentWillUnmount：做一些收尾工作, 如: 清理定時器

2.6.6. 即將廢棄的勾子

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

2.7. 虛擬DOM與DOM Diffing算法

2.7.1. 效果

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

2.7.2. 基本原理圖

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

3.1. 使用create-react-app創(chuàng)建react應(yīng)用

3.1.1. react腳手架

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

3.1.2. 創(chuàng)建項目并啟動

第一步，全局安裝：npm i -g create-react-app
第二步，切換到想創(chuàng)項目的目錄，使用命令：create-react-app hello-react
第三步，進(jìn)入項目文件夾：cd hello-react
第四步，啟動項目：npm start

3.1.3. react腳手架項目結(jié)構(gòu)

public ---- 靜態(tài)資源文件夾
favicon.icon ------ 網(wǎng)站頁簽圖標(biāo)
index.html -------- 主頁面
logo192.png ------- logo圖
logo512.png ------- logo圖
manifest.json ----- 應(yīng)用加殼的配置文件
robots.txt -------- 爬蟲協(xié)議文件
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. 功能界面的組件化編碼流程（通用）

拆分組件: 拆分界面,抽取組件

實現(xiàn)靜態(tài)組件: 使用組件實現(xiàn)靜態(tài)頁面效果

實現(xiàn)動態(tài)組件

3.1 動態(tài)顯示初始化數(shù)據(jù)

3.1.1 數(shù)據(jù)類型

3.1.2 數(shù)據(jù)名稱

3.1.2 保存在哪個組件?

3.2 交互(從綁定事件監(jiān)聽開始)

3.2. 組件的組合使用-TodoList

功能: 組件化實現(xiàn)此功能

顯示所有todo列表

輸入文本, 點擊按鈕顯示到列表的首位, 并清除輸入的文本

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

拆分組件: 拆分界面,抽取組件

實現(xiàn)靜態(tài)組件: 使用組件實現(xiàn)靜態(tài)頁面效果

實現(xiàn)動態(tài)組件

3.1 動態(tài)顯示初始化數(shù)據(jù)

3.1.1 數(shù)據(jù)類型

3.1.2 數(shù)據(jù)名稱

3.1.2 保存在哪個組件?

3.2 交互(從綁定事件監(jiān)聽開始)

3.2. 組件的組合使用-TodoList

功能: 組件化實現(xiàn)此功能

顯示所有todo列表

輸入文本, 點擊按鈕顯示到列表的首位, 并清除輸入的文本

第4章：React ajax

4.1. 理解

4.1.1. 前置說明

1.React本身只關(guān)注于界面, 并不包含發(fā)送ajax請求的代碼
2.前端應(yīng)用需要通過ajax請求與后臺進(jìn)行交互(json數(shù)據(jù))
3.react應(yīng)用中需要集成第三方ajax庫(或自己封裝)

4.1.2. 常用的ajax請求庫

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

4.2. axios

4.2.1. 文檔

https://github.com/axios/axios
4.2.2. 相關(guān)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. 消息訂閱-發(fā)布機制

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) //發(fā)布消息

4.5. 擴展：Fetch

4.5.1. 文檔

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

4.5.2. 特點

1.fetch: 原生函數(shù)，不再使用XmlHttpRequest對象提交ajax請求
2.老版本瀏覽器可能不支持

4.5.3. 相關(guān)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. 相關(guān)理解

5.1.1. SPA的理解

1.單頁Web應(yīng)用（single page web application，SPA）。
2.整個應(yīng)用只有一個完整的頁面。
3.點擊頁面中的鏈接不會刷新頁面，只會做頁面的局部更新。
4.數(shù)據(jù)都需要通過ajax請求獲取, 并在前端異步展現(xiàn)。

5.1.2. 路由的理解

1.什么是路由?
1.一個路由就是一個映射關(guān)系(key:value)
2.key為路徑, value可能是function或component
2.路由分類
1.后端路由：
1)理解： value是function, 用來處理客戶端提交的請求。
2)注冊路由： router.get(path, function(req, res))
3)工作過程：當(dāng)node接收到一個請求時, 根據(jù)請求路徑找到匹配的路由, 調(diào)用路由中的函數(shù)來處理請求, 返回響應(yīng)數(shù)據(jù)
2.前端路由：
1)瀏覽器端路由，value是component，用于展示頁面內(nèi)容。
2)注冊路由:
3)工作過程：當(dāng)瀏覽器的path變?yōu)?test時, 當(dāng)前路由組件就會變?yōu)門est組件

5.1.3. react-router-dom的理解

1.react的一個插件庫。
2.專門用來實現(xiàn)一個SPA應(yīng)用。
3.基于react的項目基本都會用到此庫。

5.2. react-router-dom相關(guān)API

5.2.1. 內(nèi)置組件

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

5.2.2. 其它

1.history對象
2.match對象
3.withRouter函數(shù)

5.3. 基本路由使用

5.3.1. 效果

5.3.2. 準(zhǔn)備

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

5.4. 嵌套路由使用

效果

5.5. 向路由組件傳遞參數(shù)數(shù)據(jù)

效果

5.6. 多種路由跳轉(zhuǎn)方式

效果

第6章：React UI組件庫

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

6.1.1. material-ui(國外)

1.官網(wǎng): http://www.material-ui.com/#/
2.github: https://github.com/callemall/material-ui

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

1.官網(wǎng): https://ant.design/index-cn
2.Github: https://github.com/ant-design/ant-design/

7.1. redux理解

7.1.1. 學(xué)習(xí)文檔

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

7.1.2. redux是什么

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

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

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

7.1.4. redux工作流程

7.2. redux的三個核心概念

7.2.1. action

1.動作的對象
2.包含2個屬性
type：標(biāo)識屬性, 值為字符串, 唯一, 必要屬性
data：數(shù)據(jù)屬性, 值類型任意, 可選屬性
3.例子：

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

7.2.2. reducer

1.用于初始化狀態(tài)、加工狀態(tài)。
2.加工時，根據(jù)舊的state和action， 產(chǎn)生新的state的純函數(shù)。

7.2.3. store

1.將state、action、reducer聯(lián)系在一起的對象
2.如何得到此對象?
1)import {createStore} from ‘redux’
2)import reducer from ‘./reducers’
3)const store = createStore(reducer)
3.此對象的功能?
1)getState(): 得到state
2)dispatch(action): 分發(fā)action, 觸發(fā)reducer調(diào)用, 產(chǎn)生新的state
3)subscribe(listener): 注冊監(jiān)聽, 當(dāng)產(chǎn)生了新的state時, 自動調(diào)用

7.3. redux的核心API

7.3.1. createstore()

作用：創(chuàng)建包含指定reducer的store對象

7.3.2. store對象

1.作用: redux庫最核心的管理對象
2.它內(nèi)部維護(hù)著:
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()

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

7.3.4. combineReducers()

作用：合并多個reducer函數(shù)

7.4. 使用redux編寫應(yīng)用

效果

7.5. redux異步編程

7.5.1理解：

1.redux默認(rèn)是不能進(jìn)行異步處理的,
2.某些時候應(yīng)用中需要在redux中執(zhí)行異步任務(wù)(ajax, 定時器)

7.5.2. 使用異步中間件

npm install --save redux-thunk

7.6. react-redux

7.6.1. 理解

1.一個react插件庫
2.專門用來簡化react應(yīng)用中使用redux

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

1.UI組件
1)只負(fù)責(zé) UI 的呈現(xiàn)，不帶有任何業(yè)務(wù)邏輯
2)通過props接收數(shù)據(jù)(一般數(shù)據(jù)和函數(shù))
3)不使用任何 Redux 的 API
4)一般保存在components文件夾下
2.容器組件
1)負(fù)責(zé)管理數(shù)據(jù)和業(yè)務(wù)邏輯，不負(fù)責(zé)UI的呈現(xiàn)
2)使用 Redux 的 API
3)一般保存在containers文件夾下

7.6.3. 相關(guān)API

1.Provider：讓所有組件都可以得到state數(shù)據(jù)

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

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

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

3.mapStateToprops：將外部的數(shù)據(jù)（即state對象）轉(zhuǎn)換為UI組件的標(biāo)簽屬性

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

4.mapDispatchToProps：將分發(fā)action的函數(shù)轉(zhuǎn)換為UI組件的標(biāo)簽屬性

7.7. 使用上redux調(diào)試工具

7.7.1. 安裝chrome瀏覽器插件

7.7.2. 下載工具依賴包

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

7.8. 純函數(shù)和高階函數(shù)

7.8.1. 純函數(shù)

1.一類特別的函數(shù): 只要是同樣的輸入(實參)，必定得到同樣的輸出(返回)
2.必須遵守以下一些約束
1)不得改寫參數(shù)數(shù)據(jù)
2)不會產(chǎn)生任何副作用，例如網(wǎng)絡(luò)請求，輸入和輸出設(shè)備
3)不能調(diào)用Date.now()或者M(jìn)ath.random()等不純的方法
3.redux的reducer函數(shù)必須是一個純函數(shù)

7.8.2. 高階函數(shù)

1.理解: 一類特別的函數(shù)
1)情況1: 參數(shù)是函數(shù)
2)情況2: 返回是函數(shù)
2.常見的高階函數(shù):
1)定時器設(shè)置函數(shù)
2)數(shù)組的forEach()/map()/filter()/reduce()/find()/bind()
3)promise
4)react-redux中的connect函數(shù)
3.作用: 能實現(xiàn)更加動態(tài), 更加可擴展的功能

總結(jié)

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

總結(jié)

以上是生活随笔為你收集整理的数万字的0基础React知识大纲一定要藏藏好的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。