React 基礎知識總結

weixin_33806914發表於2018-11-02
React

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

相關文章