第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. 效果

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

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

當第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. 效果

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

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

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

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

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. 生命周期流程圖(新)

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

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

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

卸載組件: 由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. 功能界面的組件化編碼流程（通用）

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

實現靜態組件: 使用組件實現靜態頁面效果

實現動態組件

3.1 動態顯示初始化數據

3.1.1 數據類型

3.1.2 數據名稱

3.1.2 保存在哪個組件?

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

3.2. 組件的組合使用-TodoList

功能: 組件化實現此功能

顯示所有todo列表

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

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

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

實現靜態組件: 使用組件實現靜態頁面效果

實現動態組件

3.1 動態顯示初始化數據

3.1.1 數據類型

3.1.2 數據名稱

3.1.2 保存在哪個組件?

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

3.2. 組件的組合使用-TodoList

功能: 組件化實現此功能

顯示所有todo列表

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

第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.作用: 能實現更加動態, 更加可擴展的功能

總結

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。