React
React是由faceBook發佈的一個開源框架，已經應用在instagram應用中
React是一個架構新穎的框架，可以提高項目性能
我們以前學的angular，他的特點就是指令與數據綁定，相當於爲dom元素添加了一些新的功能，讓dom元素功能更強大，例如dom自動顯隱，我們可以讓dom循環創建等等。
如果將dom比作汽車，angular相當於給這個汽車添加一些裝飾，讓他看上去更高端，提高一些馬力等等
React相當於另起爐竈，自創了一輛汽車，只有四個軲轆就可以了，很輕量級，只需要一點點馬力就可以開動的
React特點有三個
第一個虛擬dom
第二個是組件化開發
第三個是多端適配
適配多端是react最具革命性的一個創新
大致內容：我們在一處開發，可以應用在各個地方
在react的0.13版本之後拆分出一個核心模塊和一個渲染模塊
核心模塊就是react.js
專門用來創建虛擬dom
渲染模塊：例如瀏覽器端 react-dom.js
體驗React
獲取react https://github.com/facebook/react
使用react需要安裝兩個庫
創建虛擬Dom
React.createElement 創建虛擬DOM方法
第一個參數表示虛擬dom的名稱（也可以是組件名稱）
第二個參數表示虛擬dom屬性（是一個對象，如果沒有，傳入null）
從第三個參數開始表示虛擬dom子虛擬dom元素
注意子虛擬dom元素也是需要用React.createElement方法創建的
但是如果是文本節點可以直接寫入
虛擬DOM實例化對象
虛擬dom中的數據遠比真實dom元素屬性少
Props表示虛擬dom的一些屬性
Children表示該元素的所有子虛擬dom元素
虛擬dom與真實的dom行爲是一致的
渲染虛擬Dom
ReactDOM.render 將虛擬dom渲染到頁面中
第一個參數表示虛擬dom元素
第二個參數表示真實的dom容器
第三個參數表示渲染完成回調函數（用的不多）
| 1 var div = React.createElement('div', {title: "這是標題"}, '愛創課堂') 2 ReactDOM.render(div, document.getElementById('app')) |
創建組件
React建議我們組件開發
組件就是封裝後的一組虛擬DOM，這組虛擬DOM是可以被複用的
React.createClass 創建組件
參數就是描述組件的對象
Render：渲染輸出虛擬DOM樹
必須有返回值，返回值就是虛擬DOM屬性
方法返回值是一個組件的構造函數，因此使用組件必須要將組件轉化成虛擬DOM
要通過React.createElement轉化
注意
組件名稱要大寫
Render方法返回值只能有一個虛擬dom容器元素
| 1 var Nav = React.createClass({ 2 // 渲染輸出虛擬dom用render方法 3 render: function() { 4 // 通過返回值定義虛擬dom樹 5 return React.createElement( 6 'ul', 7 null, 8 // 添加子元素 9 React.createElement('li', null, '天貓女裝'), 10 React.createElement('li', null, '瑞麗女性'), 11 React.createElement('li', null, '漂亮女人'), 12 React.createElement('li', null, '海報時尚網') 13 ) 14 } 15 }) 16 // 將組件轉化成虛擬dom 17 var nav = React.createElement(Nav) 18 // 將組件渲染到頁面中 19 ReactDOM.render(nav, document.getElementById('app')) |
Jsx語法
React開發的一個問題就是，書寫虛擬dom成本很高
我們可以像書寫xml標籤一樣書寫虛擬DOM
在html中定義div，<div></div>
jsx語法中定義div虛擬dom： <div></div>
在html中定義input元素： <input type=”text” />
Jsx語法中定義input虛擬DOM： <input type=”text” />
Jsx語法定義的文件的拓展名通常是jsx
遺憾的是瀏覽器不支持這種語法
所以我們就要編譯
可以在瀏覽器端編譯
需要browser庫
並且將書寫jsx語法的標籤type類型改成text/babel
在工程化中使用
以fis3爲例，直接通過babel2插件編譯
第一步 獲取所有jsx文件
第二步 引入插件
第三步 更改後綴名稱
| 1 var h1 = (<h1>愛創課堂</h1>); |
特殊元素屬性
Jsx語法中有兩個特殊元素屬性（在createElement創建虛擬DOM的是也是特殊的）
Class （是js中的一個保留字）我們要寫成className
For （js中的一個關鍵）我們要寫成htmlFor
| 1 var h1 = <h1 className="red" >愛創課堂</h1> 2 var Demo = React.createClass({ 3 render: function () { 4 return ( 5 <div> 6 <label htmlFor="user">用戶名：</label> 7 <input type="text" id="user"/> 8 </div> 9 ) 10 } 11 }) |
文章出處：愛創課堂前端培訓