React 基礎知識總結

1、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運行環境，打開了前端人員走向後端的道路。

2、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樹的概念： 一個網頁呈現的過程： 一、瀏覽器請求服務器獲取頁面HTML代碼 二、瀏覽器要先在內存中解析DOM結構，並在瀏覽器內存中，渲染出一顆DOM樹 三、瀏覽器把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
• 構建步驟

  一、運行npm init -y快速初始化項目

  二、在項目根目錄建立src源代碼目錄和dist產品目錄

  三、使用cnpm安裝webpack，運行cnpm install webpack -D以及cnpm install webpack-cli -D

  四、Webpack4.x提供了約定大於配置的概念，目的是爲了減小配置文件的體積；默認約定的 打包的入口是/src/index.js；打包的輸出文件是/dist/main.js

  五、Webpack4.x 新增了mode選項（必填項），可選值爲development和production

  六、爲了方便運行，配置實時打包編譯工具->webpack-dev-server。    cnpm install webpack-dev-server -D

  七、Webpack-dev-server打包好的main.js是託管到了內存中，在項目根目錄的物理磁盤中看不到；可是咱們能夠認爲，在項目根目錄中，有一個看不見的mian.js

  八、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對象的屬性

  一、 history：用來跳轉路由 路徑

  2.、Match：匹配結果，若是匹配上就是對象，匹配不上就是null

  三、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屬性，和有無生命週期函數
• 什麼狀況下使用有狀態組件？什麼狀況下使用無狀態組件？

  一、若是一個組件須要本身的私有數據，則推薦使用：class建立的有狀態組件

  二、若是一個組件不須要私有的數據，則推薦使用：無狀態組件

  三、React官方：無狀態組件因爲沒有本身的state和聲明周期函數，因此運行效率會比有狀態組件稍微高一些

• 組件中的props和state/data之間的區別

  一、props中的數據都是外界傳遞過來的

  二、state/data中的數據，都是組件私有的；（經過Ajax獲取回來的數據，通常都是私有數據）

  三、 props中的數據都是隻讀的，不能從新賦值

  四、state/data中的數據，都是可讀可寫的

6．React-router

• 組件的this.props對象的屬性

  一、history：用來跳轉路由 路徑

  二、Match：匹配結果，若是匹配上就是對象，匹配不上就是null

  三、Location：當前路徑 pathname當前路徑名

• 安裝路由：cnpm install react-router-dom -S
• HashRouter

  一、什麼叫 hash 地址，hash 地址就是指 # 號後面的 url

  二、假若有一個 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：只渲染一個匹配到的<路由組件>或<重定向組件>