高性能前端框架React詳解

  前  言

　　React 是一個用於構建[用戶界面]的 JAVASCRIPT 庫。
　　React主要用於構建UI，不少人認爲 React 是 MVC 中的 V（視圖）。
　　React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
　　React 擁有較高的性能，代碼邏輯很是簡單。

一、React 特色

 　

　　1.聲明式設計 −React採用聲明範式，能夠輕鬆描述應用。

　　2.高效 −React經過對DOM的模擬，最大限度地減小與DOM的交互。--虛擬DOM結構

　　3.靈活 −React能夠與已知的庫或框架很好地配合。

　　4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不必定使用 JSX ，但咱們建議使用它。

　　5.組件 − 經過 React 構建組件，使得代碼更加容易獲得複用，可以很好的應用在大項目的開發中。

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

 

二、基本概念

 　　

　　① 虛擬DOM（Virtual DOM）機制：對於每個組件，React會在內存中構建一個相對應的DOM樹，
　　基於React開發時全部的DOM構造都是經過虛擬DOM進行，每當組件的狀態發生變化時，React都會從新構建整個DOM數據。
　　而後將當前的整個DOM樹和上一次的DOM樹進行對比，得出DOM結構變化的部分(Patchs)，而後將這些Patchs再更新到
　　真實DOM中。

　　優勢：避免了當頁面數據發生變化時，DOM也被所有更新一遍並進行從新渲染。
　　整個過程都是在內存中進行，減小了沒必要要的性能開銷，所以是很是高效的。

　　② JSX語法：
　　定義：JSX=JavaScript XML，是一種在React組件內部構建標籤的類XML語法。
　　React在不使用JSX的狀況下同樣能夠工做，可是使用JSX能夠提升組件的可讀性，加強JS語義，結構清晰，抽象程度高，代碼模塊化。

　　特色：
　　一、元素名首字母大寫
　　二、符合嵌套規則
　　三、能夠寫入求值表達式
　　四、駝峯式命名
　　五、不能使用javascript原生函數的一些關鍵詞，如for和class。須要替換成htmlFor和className
　　六、HTML語言直接寫在 JavaScript 語言之中，不加任何引號，它容許 HTML 與 JavaScript 的混寫.。

　　優勢：
　　一、JSX 執行更快。
　　二、它是類型安全的，在編譯過程當中就能發現錯誤。
　　三、使用 JSX 編寫模板更加簡單快速。

　　③ JSX 的基本語法規則：
　　遇到 HTML 標籤（以 < 開頭），就用 HTML 規則解析；
　　遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析；

 

3 、React.js/Angular.js/Vue.js的對比

　　

　　一、數據流(數據綁定)
　　① Angular 使用雙向綁定即：界面的操做能實時反映到數據，數據的變動能實時展示到界面。
　　② Vue 也支持雙向綁定，默認爲單向綁定，數據從父組件單向傳給子組件。
　　③ React推崇的是函數式編程和單向數據流
　　即給定原始界面（或數據），施加一個變化，就能推導出另一個狀態（界面或者數據的更新）。

　　二、視圖渲染
　　① AngularJS的工做原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成爲AngularJS編譯器的輸入
　　(NG框架是在DOM加載完成以後, 纔開始起做用的)
　　② React 的渲染創建在 Virtual DOM 上，一種在內存中描述 DOM 樹狀態的數據結構。
　　當狀態發生變化時，React 從新渲染 Virtual DOM，比較計算以後給真實 DOM 打補丁。
　　③ Vue.js 不使用 Virtual DOM 而是使用真實 DOM 做爲模板，數據綁定到真實節點。

　　三、模塊化與組件化
　　① Angular 依賴注入來解決模塊之間的依賴問題
　　② Vue.js 指令只封裝 DOM 操做，而組件表明一個自給自足的獨立單元 —— 有本身的視圖和數據邏輯操做。
　　③ React構建於組件之上，重要屬性props,state。一個組件就是經過這兩個屬性的值在 render 方法裏面生成這個組件對應的 HTML 結構。

　　四、語法與代碼風格
　　①Angular 2 依然保留以 HTML 爲中心。Angular 2 將 「JS」 嵌入 HTML。
　　② Vue.js Vue 也是以 HTML 爲中心，將 「JS」 嵌入 HTML，可是進階以後推薦的是使用 webpack + vue-loader 的單文件組件格式。
　　③ React 推薦的作法是 JSX + inline style，也就是把 HTML 和 CSS 全都整進 JavaScript

　　

4 、模板語法

 

　　1、基本結構

　　ReactDOM.render()是最基本的方法，做用是將模板轉化爲HTML語言，
　　並將其插入到DOM節點中。

　　

            ReactDOM.render(
                <h1>你好!React</h1>,
                //此處，必須使用JS原生的方法取到節點，而不能使用JQuery的方法獲取節點！
                document.getElementById("example1")
            )

 

　　 2、基本樣式寫法:
 　   ① React推薦使用內聯樣式！(使用小駝峯命名法則)
 　   ② React會在指定的元素數字以後自動添加像素單位px

 

            var myStyle = {
                fontSize:100,
                color:'red'
            }
            var testStyle = {
                width:800,
                height:500,
                backgroundColor:'yellow'
            }
            ReactDOM.render(
                <div style={testStyle}>
                    <h1 style={myStyle}>
                        這段文字使用了內聯樣式!
                    </h1>
                </div>,
                document.getElementById("example2")
            )

 

　　3、使用React遍歷一個數組：
　　JSX容許直接在模板中插入JS變量，若是這個變量是一個數組的話，
　　會自動展開這個數組的全部成員。

            var arr = [
                <h1 key="1">這是數組的元素1</h1>,
                <h1 key="2">這是數組的元素2</h1>,
                <h1 key="3">這是數組的元素3</h1>
            ];
            
            ReactDOM.render(
                <div>{arr}</div>,
                document.getElementById("example3")
            )

 

5 、組件

 　

　　React組件：
　　一、React容許將代碼封裝成組件，而後像插入普通的HTML標籤同樣，
　　在網頁中插入這個組件。
　　二、建立組件及輸入組件：
 　　① 建立
 　　var HelloMessage = React.createClass({
　　render : function(){
　　return <h1>這是一個自定義組件!</h1>
　　}
　　});
　　② 輸入：使用僞類標籤實例化組件類並輸出信息
　　<HelloMessage/>
　　三、注意事項：
　　① 自定義React組件的類名必須使用大寫字母開頭！(大駝峯法則)
　　② 全部的組件都必需要有本身的render方法！
　　③ 組件類只能包含一個頂層標籤，可是能夠嵌套標籤！
　　④ 在調用組件的時候，若是想要屢次調用同一個組件，須要給組件
　　設置一個根標籤，將其包裹。
　　⑤ 組件能夠任意加入屬性,屬性能夠在組件類的this.props.對象上獲取
　　Tips:
　　class屬性要寫成className
　　for屬性要寫成htmlFor
　　由於class和for都是原生JS的保留字

            var HelloMessage = React.createClass({
                render : function(){
                    return <h1>這是一個自定義組件!----{this.props.name}----{this.props.age}----</h1>
                    // <p>這是一個測試標籤</p>
                }
            });
            ReactDOM.render(
                <div>
                    <HelloMessage name = "這是組件的name屬性！" age = "這是組件的age屬性！"/>
                    <HelloMessage/>
                </div>,
                document.getElementById('example')
            );

 

  結尾

　今天就先介紹這麼多，下一期再介紹稍微深度的內容。