前 言
React 是一個用於構建[用戶界面]的 JAVASCRIPT 庫。
React主要用於構建UI，很多人認為 React 是 MVC 中的 V（視圖）。
React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。
React 擁有較高的性能，代碼邏輯非常簡單。
| 1、React 特點 |
1.聲明式設計 −React采用聲明范式，可以輕松描述應用。
2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。--虛擬DOM結構
3.靈活 −React可以與已知的庫或框架很好地配合。
4.JSX − JSX 是 JavaScript 語法的擴展。React 開發不一定使用 JSX ，但我們建議使用它。
5.組件 − 通過 React 構建組件，使得代碼更加容易得到復用，能夠很好的應用在大項目的開發中。
6.單向響應的數據流 − React 實現了單向響應的數據流，從而減少了重復代碼，這也是它為什么比傳統數據綁定更簡單
| 2、基本概念 |
① 虛擬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語義，結構清晰，抽象程度高，代碼模塊化。
特點：
1、元素名首字母大寫
2、符合嵌套規則
3、可以寫入求值表達式
4、駝峰式命名
5、不能使用javascript原生函數的一些關鍵詞，如for和class。需要替換成htmlFor和className
6、HTML語言直接寫在 JavaScript 語言之中，不加任何引號，它允許 HTML 與 JavaScript 的混寫.。
優點：
1、JSX 執行更快。
2、它是類型安全的，在編譯過程中就能發現錯誤。
3、使用 JSX 編寫模板更加簡單快速。
③ JSX 的基本語法規則：
遇到 HTML 標簽（以 < 開頭），就用 HTML 規則解析；
遇到代碼塊（以 { 開頭），就用 JavaScript 規則解析；
| 3 、React.js/Angular.js/Vue.js的對比 |
1、數據流(數據綁定)
① Angular 使用雙向綁定即：界面的操作能實時反映到數據，數據的變更能實時展現到界面。
② Vue 也支持雙向綁定，默認為單向綁定，數據從父組件單向傳給子組件。
③ React推崇的是函數式編程和單向數據流
即給定原始界面（或數據），施加一個變化，就能推導出另外一個狀態（界面或者數據的更新）。
2、視圖渲染
① AngularJS的工作原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成為AngularJS編譯器的輸入
(NG框架是在DOM加載完成之后, 才開始起作用的)
② React 的渲染建立在 Virtual DOM 上，一種在內存中描述 DOM 樹狀態的數據結構。
當狀態發生變化時，React 重新渲染 Virtual DOM，比較計算之后給真實 DOM 打補丁。
③ Vue.js 不使用 Virtual DOM 而是使用真實 DOM 作為模板，數據綁定到真實節點。
3、模塊化與組件化
① Angular 依賴注入來解決模塊之間的依賴問題
② Vue.js 指令只封裝 DOM 操作，而組件代表一個自給自足的獨立單元 —— 有自己的視圖和數據邏輯操作。
③ React構建於組件之上，重要屬性props,state。一個組件就是通過這兩個屬性的值在 render 方法里面生成這個組件對應的 HTML 結構。
4、語法與代碼風格
①Angular 2 依然保留以 HTML 為中心。Angular 2 將 “JS” 嵌入 HTML。
② Vue.js Vue 也是以 HTML 為中心，將 “JS” 嵌入 HTML，但是進階之后推薦的是使用 webpack + vue-loader 的單文件組件格式。
③ React 推薦的做法是 JSX + inline style，也就是把 HTML 和 CSS 全都整進 JavaScript
| 4 、模板語法 |
一、基本結構
ReactDOM.render()是最基本的方法，作用是將模板轉化為HTML語言，
並將其插入到DOM節點中。
ReactDOM.render( <h1>你好!React</h1>, //此處，必須使用JS原生的方法取到節點，而不能使用JQuery的方法獲取節點！ document.getElementById("example1") )
二、基本樣式寫法:
① 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") )
三、使用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組件：
1、React允許將代碼封裝成組件，然后像插入普通的HTML標簽一樣，
在網頁中插入這個組件。
2、創建組件及輸入組件：
① 創建
var HelloMessage = React.createClass({
render : function(){
return <h1>這是一個自定義組件!</h1>
}
});
② 輸入：使用偽類標簽實例化組件類並輸出信息
<HelloMessage/>
3、注意事項：
① 自定義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') );
結尾
今天就先介紹這么多，下一期再介紹稍微深度的內容。