學習react總結

1、web開發涉及的基本技術有哪些

首先咱們講一下，你在瀏覽器輸入地址到能夠看到網頁，這個過程發生了什麼？

 

1、瀏覽器渲染頁面的過程

 

1.DNS 查詢

2.TCP 鏈接

3.HTTP 請求即響應

4.服務器響應

5.客戶端渲染

 

2、客戶端渲染的過程

 

1.處理 HTML 標記並構建 DOM 樹。

2.處理 CSS 標記並構建 CSSOM 樹。

3.將 DOM 與 CSSOM 合併成一個渲染樹（render-dom）。

4.根據渲染樹來佈局，以計算每一個節點的幾何信息。

5.將各個節點繪製到屏幕上。

 

咱們知道瀏覽器是經過http請求從服務器獲取到html文檔。會根據包含相關信息的請求的頭和請求體。將其解析並構建成一個DOM樹。同時根據文檔取到相關的CSS文檔，這些文檔裏面包含了許許多多的CSSOM。最後，這顆DOM樹和這些CSSOM 會在瀏覽器內存中造成一個Render樹，瀏覽器就是根據這個Render樹渲染出咱們看到的頁面的。而這些過程都是發生在渲染引擎中的，這與負責執行動態邏輯的JavaScript引擎是相分離的。所以，爲了JS可以方便操做DOM結構，渲染引擎會暴露一些接口供JavaScript調用。 

 

註釋：

瀏覽器解析html文件生成dom文檔樹結構，就是咱們看到的網頁。

Css會對網頁樣式進行渲染，如改變字體大小、樣式、給邊框添加陰影、邊框等。

Javascript給網頁元素添加動態效果，如點擊某個元素出現彈框，鼠標放在元素上改變背景等。

其餘如es6，ES6是JS（javascript）的一個版本標準。

Less 是一門 CSS 預處理語言，它擴展了 CSS 語言，增長了變量、Mixin、函數等特性，使 CSS 更易維護和擴展。可使用在線編譯工具將less文件翻譯成css文件，也可使用工具如kaola進行轉義。

React 是一個用於構建用戶界面的 JAVASCRIPT 庫，主要用於構建UI。

先後端執行流程

 

2、爲何選擇react？

 

1、DOM操做問題

 

前面講到爲了JS可以方便操做DOM結構，渲染引擎會暴露一些接口供JavaScript調用。經過暴露的接口，JS能夠操做到DOM樹中的節點。可是性能其實不是很高，特別是對於一些複雜的網頁，添加刪除節點會致使DOM節點的更新，這個開銷是很大的。在以前，廣泛都是經過JQuery來和DOM進行交互：

 

Bullds/modidies構建/修改、delivers events 傳遞事件

 

在網頁設計愈來愈豐富，邏輯交互愈來愈複雜的狀況下，頻繁地進行DOM操做組件逐漸成爲了性能的瓶頸。而以直接操做DOM的JQuery也再也不像以前那麼大一統。許許多多前端框架如雨後春筍般涌現，如AngularJS，React，Vue等。其中最火的當屬React，它提供了一套不一樣的，高效的方案來更新DOM。這種全新的解決方案就是「Virtual DOM」:

 

如上圖所所示，React會在內存中根據DOM建立一個虛擬的DOM樹。基於React的開發並不直接操做DOM，而是經過操做這棵虛擬DOM進行的，每當數據變化的時候，React會從新構建整個DOM樹，而後將當前DOM樹和上個DOM樹進行對比，獲得DOM結構的區別，而後僅僅將須要變化的部分進行實際的瀏覽器DOM更新。

既然最後仍是會經過React來進行對DOM的更新，那爲什麼還會有性能的提高呢？

緣由在於React並不老是立刻對DOM樹所作的更改進行更新，換而言之，就是你在虛擬DOM樹上作的操做，不保證立刻會產生實際的效果，它只會在你須要產生DOM樹更新的時候進行更新。這樣的一個機制就使得React可以等到一個事件循環的結尾，將若干個由數據影響的節點合併在一塊兒，和實際DOM進行比較，只操做Diff部分，而不是像傳統的js那樣須要更新DOM操做，就更新DOM樹一次，於是能達到提升性能的目的。

同時，在保證性能的同時，React經過組件化的抽象概念，讓開發者將不須要關注某個數據的變化該如何體如今DOM樹上，只須要關係某個數據更新時，頁面是如何Render的。

 

2、版本架構問題

 

之前的架構是採用先後端分離方式，搭建了一個 node 中間層進行頁面的渲染，以求提高頁面的渲染速度。舊版平臺的結構以下：

 

從圖中咱們能夠看到，儘管咱們前端掌握了 server，能夠進行頁面渲染的控制，可是服務端的渲染和前端的渲染和路由依然是割裂的，之間有不少冗餘的內容。致使這些冗餘的主要緣由，其實仍是先後端渲染方式不一致以及先後端代碼的分離。

 

（1）是否須要先後端分離

 

咱們知道，在傳統的 MVC 架構的項目之中，js 代碼只佔 View 層的很小的一部分。隨着項目的漸進發展，前端功能的複雜度日益增高，致使項目難以維護；同時先後端語言並不一致（咱們都知道 Java 跟 JavaScript 基本上是雷鋒和雷峯塔的關係），不一樣的開發在一個項目裏操做極爲不便，所以才產生了先後端分離。

可是隨着 js 向服務端的進發，咱們的中間層 server 也採用支持 js 的 node 來進行架構，因此先後端語言不一致的問題基本上抹平了；而前端功能複雜這一點，從剛纔的分析咱們也能夠看到，其實前端和後端在路由、渲染這些功能上是有很大的重合，所以前端的 server 和前端邏輯項目沒有必要進行分離。

實際上，這裏咱們的先後端分離，已經有傳統意義上前端和後端代碼的分離、服務端和瀏覽器客戶端的分離，演變爲後端數據提供和前端提供渲染的分離。

 

（2）先後端混合渲染的問題

 

若是將先後端代碼糅合在一塊兒，那麼渲染這裏將會是服務端邏輯和客戶端邏輯的一個結合點，它們的模板、渲染方式都必定要一致，才能減小開發的工做量。

對於咱們舊版項目來講，服務端採用 handlebars 做爲模板，而前端採用 MVVM 模式的 avalon 的模板，二者在用法和理念上都是有必定衝突的。其中 MVVM 模式在服務端渲染中最棘手的問題就是： 要實現雙向數據綁定，必需要經歷一次 DOM 渲染 。這樣就致使後端只能渲染一箇中間狀態的模板，而後還須要前端在更改一次 DOM，沒法達到『直出』的效果。

 

這個問題看似困難，但在 react 出現以後，卻獲得了完美的解決：react 基於 virtual DOM，不須要掃描 DOM 來創建雙向綁定關係，只須要在每次狀態變更時進行 diff，有變化纔會進行更新。所以，咱們能夠在服務端直接渲染出 DOM 結構，若是前端最終生成的虛擬 DOM 跟後端直出的 DOM 保持一致，那麼就不須要更改 DOM 結構，大幅度提高渲染速度。

 

（3）同構應用的構建

 

若是要實現先後端代碼同構，其實只要保證兩個一致便可： 包管理工具 和 模塊依賴方式 的一致。這裏咱們能夠看到，這兩者的一致性都能得以保證：

包管理工具：前端和 node 目前都採用 npm 來進行依賴管理，這就保證客戶端和服務端均可以使用同一個兼容包；

模塊依賴方式：經過 webpack 這樣的打包工具，能夠保證前端和均採用 CommonJS 的依賴方式，確保代碼能夠互相依賴。

有了這兩者的保證，咱們就能夠完美的解決同構的問題，剩下須要考慮的就是如何處理服務端渲染了。

 

（4）項目在使用了 react 進行同構構建以後，能夠解決的問題

 

開發效率低的問題：同構應用只有一個項目和一套技術棧，只要擁有 react 開發經驗，就能夠快速投入前端和後端的開發當中；

可維護性差的問題：同構應用能夠進行大量的代碼公用，包括工具方法、常量、頁面組件和 redux 的大部分邏輯等，可重用性大大提升；

首屏性能、SEO 等：有了服務端渲染，不再擔憂首屏和 SEO 問題。

 

3、詳細介紹react

首先，React是一個用於構建用戶界面的Javascript庫,但React並非一套完整的MVC或MVVM的框架，它僅涵蓋V-view視圖層。

 

1、建議使用JSX的代碼進行React的開發。

JSX語法，像是在Javascript代碼裏直接寫XML的語法，實質上這只是一個語法糖，每個XML標籤都會被JSX轉換工具轉換成純Javascript代碼，React 官方推薦使用JSX， 固然你想直接使用純Javascript代碼寫也是能夠的，只是使用JSX，組件的結構和組件之間的關係看上去更加清晰。

 

由於Javascript代碼與JSX代碼並不兼容，凡是使用JSX的地方咱們都須要加上 type="text/babel"。

 

2、將JSX轉換爲JS的方法

使用browser.js(Babel5.8.23)在瀏覽器中轉換JSX

Babel是React團隊選擇的在使用React過程當中轉換ES*和JSX爲ES5語句的工具

實際上，Babel的主要用途並不是一個JSX語句轉換器。Babel主要用途是一個JavaScript轉換器，它能夠轉換各類ES*代碼爲瀏覽器可識別的ES代碼。就目前來講，Babel主要會轉換ES6和ES7語句爲ES5語句，轉換JSX看起來倒像是其的一個附加功能。

babel.js與browser.js的關係

babel的瀏覽器版本爲browser.js（未精簡）和browser.min.js（已精簡）

 

React默認會進行HTML的轉義，避免XSS攻擊，若是要不轉義，能夠這麼寫：

在使用React以前，咱們必需要先引入三個庫——react.js/react-dom.js/browser.min.js

ReactDOM.render是React的最基本方法用於將模板轉爲HTML語言，並插入指定的DOM節點。ReactDOM.render(template,targetDOM),該方法接收兩個參數：第一個是建立的模板，多個dom元素外層需使用一個標籤進行包裹，如div；第二個參數是插入該模板的目標位置。

 

3、展現react的組件定義和生命週期

 

調用組件

 

瀏覽器輸出

 

React文檔https://doc.react-china.org/

4、React生命週期圖

 

5、react的特色 

A.virtual dom  React經過對DOM的模擬，最大限度地減小與DOM的交互。全部輸入都會當成字符串而後將虛擬dom轉化成dom，可消除除注入式攻擊

B.組件化 : 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。【模塊化】

C.單向響應的數據流 : React 實現了單向響應的數據流，從而減小了重複代碼，這也是它爲何比傳統數據綁定更簡單。

React可以提升開發效率，並且可讓代碼更容易理解，維護和測試。

相比於Angular，React更加輕量

React相較於vue的優點
更適合大型應用和更好的可測試性

更大的生態系統，更多的支持和好用的工具

 

演示1在react框架中引入d3.js文件加入svg代碼，頁面就能夠很好的顯示圖表。

演示2在react框架中引入外部js文件實現拖動效果，頁面元素就能夠實現拖動功能。

 

Ant design的react實現，開發和服務於企業級後臺產品

優勢：UI組件樣式友好度，用戶體驗好

Element和iView(vue)都是使用Vue開發的UI組件

缺點：響應式表現通常，antd的定位就是pc端，若是想要開發手機端，就用antdmobile了

Bootstrap是純粹的UI框架，Ant Design給出框架的同時，也給出了設計規範。

組件部分是Ant Design最大的亮點， 豐富的組件提供了覆蓋大部分應用場景的能力。

 

一、react開發環境搭建步驟；

方式一：在終端書輸入以下命令：

使用react開發新項目:npm install -g create-react-app

在現有項目中添加react：npm init --save react react-dom

或者是：yarn add react react-dom

方式二：直接在頁面中引入react文件

 

React.js 是react庫文件。React-dom.js是將react的虛擬dom轉換爲dom節點加入網頁。Browser.js是將jsx代碼轉換成js

 

搭建ant design+react 項目（安裝webstorm+node.js(npm)）

a.npm install -g create-react-app yarn（對create-react-app這個腳手架進行全局安裝）

b.create-react-app antd-demo（建立名字爲antd-demo的react項目）

c.yarn add antd（引ant design 的組件庫）

d.npm start （啓動項目）

 

4、演示demo樣例，進行操做演示，並結合demo代碼進行講解。