《後端也要懂一點前端系列》React入門

在上一篇文章中咱們使用了webpack搭建項目併成功運行了起來，可是對於在公司使用而言這點是徹底不夠的，因此接下來咱們就開始學習如何使用React框架來進行開發。本篇文章不會探討原理，只是從一個新手的角度來介紹如何使用。若是沒看我第一篇的能夠先看我第一篇搭建項目的文章《後端也要懂一點前端系列》使用webpack搭建項目

React起源

以銅爲鑑，能夠正衣冠；以人爲鑑，能夠明得失；以史爲鑑，能夠知興替。瞭解一項技術應該先了解其發展過程，及產生緣由。

React 起源於 Facebook 的內部項目，由於該公司對市場上全部 JavaScript MVC 框架，都不滿意，就決定本身寫一套，用來架設 Instagram 的網站。作出來之後，發現這套東西很好用，就在2013年5月開源了。

因爲 React 的設計思想極其獨特，屬於革命性創新，性能出衆，代碼邏輯卻很是簡單。因此，愈來愈多的人開始關注和使用，認爲它多是未來 Web 開發的主流工具。

前端框架基本概念

• 模塊化：是從代碼的角度來進行分析，把一些可複用的代碼，抽離爲單個的模塊； 便於項目的維護和開發
• 組件化：是從 UI 角度來進行分析的，把一些可複用的 UI 元素，抽離爲單獨的組件；便於項目的維護和開發

其實上面說的兩個概念在任何語言中其實都會體現，其實換句話就是能公用的就公用，不能公用的就本身寫。

React中的核心概念

在任何一個學習React的概念中都會涉及到兩個技術，一個是虛擬Dom，一個是Diff算法，這裏我也不知道其實現原理，大概簡單介紹一下其概念，以及我本身對於這兩個概念的理解，若是有誤但願可以指出來。

虛擬DOM

在瞭解虛擬DOM以前咱們須要知道什麼是DOM？DOM是由瀏覽器中的JS提供功能，因此咱們只能人爲的使用 瀏覽器提供的固定的API來操做DOM對象。這裏咱們隨便打開一個網頁能夠看到這裏的每個標籤沒其實都是DOM。那麼什麼是虛擬DOM呢？並非由瀏覽器提供的，而是咱們程序員手動模擬實現的，相似於瀏覽器中的DOM，可是有着本質的區別。

那麼爲何會出現虛擬DOM呢？其實我以爲仍是爲了提升瀏覽器的渲染性能，在這裏給你們舉一個例子。下面的form表單是前端常常遇見的，而咱們點擊相應的列也能對其進行排序。例如咱們點擊了時間從大到小排序了。這裏咱們能夠看到其實咱們只須要修改前兩列的順序就好了，若是每次的更新操做都要從新渲染整個DOM樹的話，查找，從新渲染的成本都很高。

人物	時間	地點
劉大瘸子	2019-10-20	北京
馬二愣子	2019-10-21	上海
趙三駝子	2019-10-19	廣州
吳大棒槌	2019-10-18	深圳
鄭老六	2019-10-17	杭州
王大麻子	2019-10-16	武漢

那麼React推出的虛擬DOM這個概念就是爲了解決這個渲染的問題。那麼虛擬DOM的出現就是隻修改咱們須要修改的數據便可，其餘數據不動。

在 React 中，render 執行的結果獲得的並非真正的 DOM 節點，結果僅僅是輕量級的 JavaScript 對象，咱們稱之爲 virtual DOM。

Diff算法

上面咱們學習了什麼是虛擬Dom，那麼React是怎麼知道了咱們須要新數據和舊數據順序只是前兩行不一樣呢？換句話說就是怎麼找到新舊數據的差異呢？這裏就用到了Diff算法。

提到樹，相信大多數同窗馬上想到的是二叉樹，遍歷，最短路徑等複雜的數據結構算法。而在 React 中，樹的算法其實很是簡單，那就是兩棵樹只會對同一層次的節點進行比較。

React 只會對相同顏色方框內的 DOM 節點進行比較，即同一個父節點下的全部子節點。當發現節點已經不存在，則該節點及其子節點會被徹底刪除掉，不會用於進一步的比較。這樣只須要對樹進行一次遍歷，便能完成整個 DOM 樹的比較。

如何使用

上面簡單介紹了概念，接下來就到了如何使用的階段了。在React學習過程供，須要安裝兩個包。

• react：這個專門用來建立React組件，組件生命週期等這些東西。
• react-dom：裏面主要封裝了和DOM操做相關的包，好比要把組件渲染到頁面上。

安裝這兩個包的命令是cnpm i react react-dom -S

而後在能夠在咱們的js文件中引入這兩個包了

import React from 'react'
import ReactDOM from 'react-dom'

在 React 中，如要要建立 DOM 元素了，只能使用 React 提供的 JS API 來建立。使用方法是React.createElement。React.createElement()方法，用於建立 虛擬DOM 對象，它接收 3個及以上的參數。

• 參數1： 是個字符串類型的參數，表示要建立的元素類型
• 參數2： 是一個屬性對象，表示 建立的這個元素上，有哪些屬性
• 參數3： 從第三個參數的位置開始，後面能夠放好多的虛擬DOM對象，這寫參數，表示當前元素的子節點

var myDiv = React.createElement('div', { title: 'this is a div', id: 'mydiv' }, '這是一個div')

咱們上面所寫的即建立了這樣一個div元素。

<div title="this is a div" id="mydiv">這是一個div</div>

建立完元素之後咱們想要將其渲染到頁面上，該怎麼渲染呢？咱們在html文件中建立以下元素。

<div id="app"></div>

接下來咱們將上面咱們建立的div元素渲染到id=app的元素裏面，該怎麼作呢？

ReactDOM.render(myDiv, document.getElementById('app'))

接下來咱們運行項目，就發現已經渲染到咱們的頁面了。

JSX語法

若是咱們每次建立元素都要有上面一套操做的話，React估計也不會發展這麼迅速了，React官方提出了一套JSX語法規範，可以讓咱們在JS文件中，書寫相似HTML那樣的代碼，快速定義虛擬DOM結構。

JSX語法本質仍是使用了React.createElement在內部爲咱們建立了元素。也就是說哪怕是咱們寫了JSX這樣的標籤，也並非直接將咱們的HTML標籤渲染到頁面上，而是先將其轉換成React.createElement這樣的JS代碼，再渲染。

首先咱們依然仍是須要命令安裝一些東西才能使用，咱們安裝Babel，安裝命令爲cnpm i babel-loader@8 @babel/core @babel/preset-env @babel/preset-react -D

• babel-loader：使用 Babel 轉換 JavaScript依賴關係的 Webpack 加載器
• @babel/core：即 babel-core，將 ES6 代碼轉換爲 ES5
• @babel/preset-env：即 babel-preset-env，根據您要支持的瀏覽器，決定使用哪些 transformations / plugins 和 polyfills，例如爲舊瀏覽器提供現代瀏覽器的新特性
• @babel/preset-react：即 babel-preset-react，針對全部 React 插件的 Babel 預設，例如將 JSX 轉換爲函數

Babel 是一個工具鏈，主要用於將 ECMAScript 2015+ 版本的代碼轉換爲向後兼容的 JavaScript 語法，以便可以運行在當前和舊版本的瀏覽器或其餘環境中

而後咱們還須要在項目根目錄下建立.babelrc文件，並加入以下內容

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

接着在webpack.config.js文件中在module.exports中進行配置以下

module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
}

接下來咱們就可以在js文件中快樂的使用html語言了。

var jsxMyDiv = <div>
    這是使用JSX語法建立的div元素
</div>

ReactDOM.render(jsxMyDiv, document.getElementById('app'))

接下來咱們查看頁面就能夠看到咱們建立的元素了。

接下來大概介紹一下JSX語法的注意點。

• 若是要在 JSX 語法內部，書寫 JS 代碼了，那麼，全部的JS代碼，必須寫到 {} 內部。

  var titleNmae = "這是一個標題"
  	var jsxMyDiv = <div>
  	    <h1 title = {titleNmae}>測試標題</h1>
  	</div>

• 當 編譯引擎，在編譯JSX代碼的時候，若是遇到了<那麼就把它看成 HTML代碼去編譯，若是遇到了 {} 就把 花括號內部的代碼看成 普通JS代碼去編譯；

• 在{}內部，能夠寫任何符合JS規範的代碼；

• 在JSX中，若是要爲元素添加class屬性了，那麼，必須寫成className，由於 class在ES6中是一個關鍵字；和class相似，label標籤的 for 屬性須要替換爲 htmlFor.

• 在JSX建立DOM的時候，全部的節點，必須有惟一的根元素進行包裹；

• 若是要寫註釋了，註釋必須放到 {} 內部(Contrl+/便可生成註釋)

總結

到目前爲止從如何建立項目到如何在項目中簡單使用React框架，感受又像當時第一次學習Java同樣，什麼東西對於我來講都是新的，搭建環境各類出錯。可是當最後看到頁面上成功顯示出想要的東西的時候，瞬間就感受什麼都值了。這或許就是學習的樂趣所在吧。

本文代碼地址

參考

• 深刻淺出 React（四）：虛擬 DOM Diff 算法解析
• React虛擬DOM淺析
• Babel 入門教程
• 使用 Webpack 4 和 Babel 7 從頭開始建立 React 應用程序