一、Node.js
Node.js並不是一個JavaScript框架，Node.js是JavaScript運行時的運行環境，類比Java中的JVM。
java的開端是什麼，無疑是JVM，自從有了JVM，java才能吹牛說自己是“一次編寫處處運行”，不管你是windows還是linux，只要安裝了對應版本的JVM都可以運行.class文件。
同樣Node.js的作用和JVM的一樣一樣的，也是js的運行環境，不管是你是什麼操作系統，只要安裝對應版本的Node.js，那你就可以用js來開發後臺程序。這具有劃時代的意義，意味着一直以來只能在瀏覽器上玩來玩去的js，可以做後端開發了。
從有了Node.js後就催生出一大批用js做後臺開發的前端人員，這部分人員就是偏前端的“全棧程序員”。記住，Node.js是和JVM同等地位的js運行環境，打開了前端人員走向後端的道路。
二、React介紹
React設計思想及其獨特，屬於革命性創新，性能出衆，代碼邏輯卻非常簡單。
庫（library）：小而巧，庫只提供了特定的api。優點是船小好調頭，可以很方便的從一個庫切換到另外的庫，但是代碼幾乎不會改變。
框架（Framework）：大而全，框架提供了一整套的解決方案。所以，如果在項目中間，想切換到另外的框架是比較困難的。
和Angular1相比，React設計很優秀，一切基於JS並且實現了組件化開發的思想
React提供了無縫轉到ReactNative上的開發體驗。
1．React與Vue的對比
（1）組件化方面
+ 什麼是模塊化：是從代碼的角度來進行分析的；把一些可複用的代碼，抽離爲單個的模塊，便於項目的維護和開發。
+ 什麼是組件化：是用UI界面的角度來進行分析的；把一些可複用的UI元素，抽離爲單獨的組件，便於項目的維護和開發。
+ 組件化的好處：隨着項目規模的增大，手裏的組件越來越多，很方便就可以把現有的組件，拼接成一個完整的頁面。
+ Vue是如何實現組件化的：通過.vue文件，來創建對應的組件：
+ template 結構
+ script 行爲
+ style 樣式
+ React是如何實現組件化的：React中有組件化的概念，但是並沒有像Vue這樣的組件模板文件；React中，一切都是以JS來表現的。因此要學習React，JS要合格，ES6和ES7（async和await）要會用
（2）移動APP開發體驗方面
- Vue，結合Weex這門技術，提供了遷移到移動端APP開發的體驗（Weex目前只是一個小的玩具，並沒有很成功的大案例，主要是阿里系的應用在使用）
- React，結合ReactNative，也提供了無縫遷移到移動APP的開發體驗（RN用的最多，也是最火最流行的）
2．React中的幾個核心概念
（1）虛擬DOM
- DOM本質是什麼：瀏覽器中的概念，用JS對象來表示頁面上的元素，並提供了操作DOM對象的api（瀏覽器提供的）
- 什麼是React中的虛擬DOM：是框架中的概念，手動用JS對象來模擬頁面上的DOM元素和DOM的嵌套關係（框架提供的）
- 爲什麼要實現虛擬DOM（虛擬DOM的目的）：爲了實現頁面中，DOM元素的高效更新。
- DOM樹的概念： 一個網頁呈現的過程： 1、瀏覽器請求服務器獲取頁面HTML代碼 2、瀏覽器要先在內存中解析DOM結構，並在瀏覽器內存中，渲染出一顆DOM樹 3、瀏覽器把DOM樹，呈現到頁面上
- 總結：什麼是虛擬DOM？
本質：用JS對象的形式，來模擬頁面上DOM元素和嵌套關係（虛擬DOM是以JS對象的形式存在的） 目的：實現DOM元素的高效更新
（2）Diff算法
- tree diff：新舊兩顆DOM樹，逐層對比的過程，就是Tree Diff；當整顆DOM逐層對比完畢，則所有需要被按需更新的元素，必然能夠找到
- component diff：在進行tree diff的時候，每一層中，組件級別的對比，叫作component diff；
- 如果對比前後，組件的類型相同，則暫時認爲此組件不需要被更新；
- 如果對比前後，組件類型不同，則需要移除舊組件，創建新組件，並追加到頁面上；
- element diff：在進行組件對比的時候，如果兩個組件類型相同，則需要進行元素級別的對比，這叫作element diff；
3．構建基本的webpack4.x項目
- 因爲webpack是基於Node構建的，所以webpack支持所有Node的api和語法
- 在webpack4.x中，有一個很大的特性，就是約定大於配置 約定的默認打包入口是/src/index.js
- 構建步驟
1、運行npm init -y快速初始化項目
2、在項目根目錄創建src源代碼目錄和dist產品目錄
3、使用cnpm安裝webpack，運行cnpm install webpack -D以及cnpm install webpack-cli -D
4、Webpack4.x提供了約定大於配置的概念，目的是爲了減少配置文件的體積；默認約定的 打包的入口是/src/index.js；打包的輸出文件是/dist/main.js
5、Webpack4.x 新增了mode選項（必填項），可選值爲development和production
6、爲了方便運行，配置實時打包編譯工具->webpack-dev-server。 cnpm install webpack-dev-server -D
7、Webpack-dev-server打包好的main.js是託管到了內存中，在項目根目錄的物理磁盤中看不到；但是我們可以認爲，在項目根目錄中，有一個看不見的mian.js
8、Webpack-dev-server打包後打開的首頁是項目根目錄，而不是src目錄下的index.html。 爲了讓打包編譯後的網頁自動打開index.html，就需要用到HtmlWebpackPlugin插件，來在項目根目錄下生成index.html。安裝並在webpack.config.js的module.exports中配置plugins。
4．在項目中使用React
（1）什麼是React和React-dom
- React：專門用來創建組件和虛擬DOM的，同時組件的生命週期都在這個包中
- React-dom：專門進行DOM操作的，最主要的應用場景就是ReactDOM.render()
（2）React創建虛擬DOM元素
- 在JS文件中，默認不能寫HTML的標籤，否則會打包失敗。這個時候需要使用babel來轉換這些JS中的標籤
- 注意，在JS中混合寫入類似於HTML的語法，叫作JSX的語法（符合XML規範的JS）
- SX語法的本質，還是在運行的時候，被轉換成了React.createElement的形式來執行的（通過babel轉換）
-
配置babel的步驟
- 安裝所需的bebel包
- 在webpack.config.js中配置babel，將babel配置在第三方匹配規則中（module下的rules中）
- 在項目根目錄中編寫babel的配置文件->.babelrc，這是一個json的配置文件，所以要符合json語法規則。
- 在.babelrc中配置babel用到的語法規則和插件
- 當要在JSX代碼中使用JS表達式時，需要用大括號{}將JS表達式框起來
5．React中創建組件
（1）第一種創建組件的方式
使用構造函數來創建組件，如果要接收外界傳遞的數據，需要在構造函數的參數列表中使用props來接收；必須要向外return一個合法的JSX的虛擬DOM。
- 創建組件
//第一種創建組件的方式
function Hello(props) {
//如果在一個組件中 return 一個 null。則表示此組件是空的，什麼都不會渲染
// return null
//在組件中，必須返回一個合法的JSX虛擬DOM元素
return <div>這是 Hello 組件 --- {props.name} --- {props.age} --- {props.gender}</div>
//無論是vue還是React，組件中的props永遠都是隻讀的，不能被重新賦值
}- 爲組件傳遞數據
ReactDOM.render(
<div>
{/*直接把創建的組件名稱，以標籤的形式，丟到頁面上即可*/}
<Hello name={dog.name} age={dog.age}
gender={dog.gender}></Hello>
</div>
, document.getElementById('parent'))- this.props對象的屬性
1、 history：用來跳轉路由 路徑
2.、Match：匹配結果，如果匹配上就是對象，匹配不上就是null
3、Location：當前路徑 pathname當前路徑名
- 父組件向子組件傳遞數據
- 使用{...obj}屬性擴散傳遞數據
- 將組件封裝到單獨的文件中
- 注意：組件的名稱首字母必須是大寫
- 如何省略.jsx後綴名
//打開webpack.config.js，並在導出的配置對象中，新增如下節點 resolve: {
extensions: [
'.js', '.jsx', '.json'
]//表示這幾個文件的後綴名，可以省略不寫（.js和.json是默認有的）
}- 設置別名 resolve: {
//alias:別名；這裏設置別名是爲了讓後續引用的地方減少路徑的複雜度
alias: {
'@': path.join(__dirname, './src')
}
}（2）第二種創建組件的方式
- 使用class關鍵字來創建組件
- 通過extends繼承React.Component
- 每一個類中，都有一個構造器，如果我們沒有手動指定構造器，那麼，可以認爲類內部有個隱形的，看不見的空構造器，類似於constructor(){}
- 構造器的作用就是，每當new這個類的時候，必然會 優先執行，構造器中的代碼。
- 通過 new出來的實例 訪問到的屬性，叫作實例屬性。構造器中的屬性，是實例屬性。
- 通過 構造函數 直接訪問到的屬性，叫作靜態屬性。在class中通過static關鍵字定義的屬性是靜態屬性。
- 實例方法，通過 new出來的實例 訪問到的方法，實際項目中使用較多
- 靜態方法，通過 構造函數 直接訪問到的方法，實際項目中使用到的不多。在class中通過static關鍵字定義的方法
- 注意：在class的{ }區間內，只能寫 構造器、靜態方法、靜態屬性和實例方法
- 注意：class關鍵字內部還是通過function的方式來實現的。所以說，我們把class關鍵字，稱作 語法糖
- 通過extends關鍵字來實現繼承，將共有的某些屬性或方法放到父類中
- 在class關鍵字創建的組件中，如果想使用外界傳遞過來的props參數，不需接收，直接通過this.props.**來訪問即可
- ES6的展開運算符【...】可以展開一個對象
（3）兩種創建組件的方式的對比
- 使用class關鍵字創建的組件，有自己的私有數據（this.state）和聲明周期函數，但是使用function創建的組件，只有props，沒有自己的私有數據和生命週期函數
- 用構造函數創建出來的組件，叫作‘無狀態組件’【無狀態組件今後用得不多】
- 用class關鍵字創建出來的組件，叫作‘有狀態組件’【今後用的最多】
- 有狀態組件和無狀態組件之間的本質區別就是：有無state屬性，和有無生命週期函數
- 什麼情況下使用有狀態組件？什麼情況下使用無狀態組件？
1、如果一個組件需要自己的私有數據，則推薦使用：class創建的有狀態組件
2、如果一個組件不需要私有的數據，則推薦使用：無狀態組件
3、React官方：無狀態組件由於沒有自己的state和聲明周期函數，所以運行效率會比有狀態組件稍微高一些
- 組件中的props和state/data之間的區別
1、props中的數據都是外界傳遞過來的
2、state/data中的數據，都是組件私有的；（通過Ajax獲取回來的數據，一般都是私有數據）
3、 props中的數據都是隻讀的，不能重新賦值
4、state/data中的數據，都是可讀可寫的
6．React-router
- 組件的this.props對象的屬性
1、history：用來跳轉路由 路徑
2、Match：匹配結果，如果匹配上就是對象，匹配不上就是null
3、Location：當前路徑 pathname當前路徑名
- 安裝路由：cnpm install react-router-dom -S
- HashRouter
1、什麼叫 hash 地址，hash 地址就是指 # 號後面的 url
2、假如有一個 Link 標籤，點擊後跳轉到 /abc/def。
BrowserRouter： http://localhost:8080/abc/def
HashRouter： [<u>http://localhost:8080/#/abc/def</u>](http://localhost:8080/#/abc/def)- 如果有服務器端的動態支持，建議使用 BrowserRouter，否則建議使用 HashRouter。
原因在於，如果是單純的靜態文件，假如路徑從 / 切換到 /a 後，此時刷新頁面，頁面將無法正常訪問，需要在服務器端進行相關配置
- Switch：只渲染一個匹配到的<路由組件>或<重定向組件>