首先了解React中所牽扯到的幾個重要的概念javascript
是Facebook的開發團隊開發出來的一個用於構建用戶界面個js庫,最近纔開源出來公佈於世,它的初衷是用於建立「獨立的視圖組件」,一個React組件本質上來講就是擁有一個本身做用域的DOM元素。html
React 使用的是特殊的 JavaScript. 語法, 叫作 JSX。這個是最吸引個人地方,也是最有創意的地方。React把傳統的js編程語言方式換成了JSX,處於好奇,我在網上查看了關於JSX的一些資料,讓我頓時一驚,原來JSX性能比js要好不少,下面詳細介紹一下。前端
JSX靜態類型化,面向對象的編程語言,設計在現代瀏覽器上運行,簡單描述就是Javascript的XML語法擴展。java
特色一: 快react
JSX執行優化,編譯源代碼的javascript。生成的代碼運行速度比直接在JavaScript編寫的要快,使用了優化的JavaScript庫Box2D變得更快,當移植到JSX(在ios 5.1快12%,在Android 2.3快29%)。ios
Box2D是一個用於模擬2D剛體物體的C++引擎。zlib許但是一個自由軟件受權協議。git
特色二:更安全 github
與JavaScript,JSX靜態類型化,大可能是類型安全的。 應用程序的質量變得更高使用JSX被開發時,因爲許多錯誤在編譯過程當中會被捕獲。 它還提供了編譯器級別的調試特性。編程
以下圖,更直觀的表達了JSX和JS的區別canvas
在React中用jsx語法糖來編寫程序,在JSXTransformer.js文件中會處理成js的語法形式輸出
經過例子來講明:
/** @jsx React.DOM */ var component = React.createClass({ render: function() { return <a href="http://baidu.com">baidu</a> } });
轉化爲
/** @jsx React.DOM */ var component = React.createClass({ render: function() { return React.DOM.a( {href:"http://baidu.com"}, "baidu") } });
注:這裏的/** @jsx React.DOM*/看上去像註釋,實際上是一個標記,必須加上!這告訴JSX爲React過程的文件。若是你不包括編譯指示、源將保持不變。
在return的時候明顯寫法出現了差別,轉換以後的寫法是React.DOM.a;
爲何用jsx,官方網站給咱們一些解釋:
1.它是將DOM結構更容易
2.設計師更願意作出的改變
3.對於那些使用MXML或XAML很熟悉。
固然若是開發者不喜歡用JSX,那就在開發項目中能夠不引入JSXTransformer.js文件,可是在編寫js腳本的時候就要直接以React.DOM.*函數,下面例子介紹
var link = React.DOM.a({href:'http://facebook.github.io/react'},'React');
注:建立一個a標籤,並對其設置一個連接
JSX看上去像HTML,但仍是有一些差別的,接下來看下這之間的DOM差別:
React已經實現了一個獨立於瀏覽器的事件,系統性能和跨瀏覽器兼容性的DOM系統。
1.style屬性和構建的屬性接受一個javascript對象,而不是CSS的字符串,這個更爲高效,並防止XSS攻擊。
XSS攻擊:跨站腳本攻擊(Cross Site Scripting),爲不和層疊樣式表(Cascading Style Sheets, CSS)的縮寫混淆。故將跨站腳本攻擊縮寫爲XSS。
2. onchange事件行爲,當一個表單字段更改的時候,該事件才觸發,打破了現有瀏覽器的行爲操做。
3. 表單組件<input>,<textarea>,<option>等不一樣於其餘本地組件,由於本地組件能夠經過用戶交互變化,而React中的這些組件單獨提供了接口,使它們更容易管理的形式響應用戶交互。
在React.js中對DOM元素進行了封裝操做,咱們要使用哪一個DOM元素就必須使用React.DOM.*, '*'表示DOM元素
看下React對DOM元素的封裝吧
var ReactDOM = mapObject({ a: false, abbr: false, address: false, area: true, article: false, aside: false, audio: false, b: false, base: true, bdi: false, bdo: false, big: false, blockquote: false, body: false, br: true, button: false, canvas: false, caption: false, cite: false, code: false, col: true, colgroup: false, data: false, datalist: false, dd: false, del: false, details: false, dfn: false, dialog: false, div: false, dl: false, dt: false, em: false, embed: true, fieldset: false, figcaption: false, figure: false, footer: false, form: false, // NOTE: Injected, see `ReactDOMForm`. h1: false, h2: false, h3: false, h4: false, h5: false, h6: false, head: false, header: false, hr: true, html: false, i: false, iframe: false, img: true, input: true, ins: false, kbd: false, keygen: true, label: false, legend: false, li: false, link: true, main: false, map: false, mark: false, menu: false, menuitem: false, // NOTE: Close tag should be omitted, but causes problems. meta: true, meter: false, nav: false, noscript: false, object: false, ol: false, optgroup: false, option: false, output: false, p: false, param: true, picture: false, pre: false, progress: false, q: false, rp: false, rt: false, ruby: false, s: false, samp: false, script: false, section: false, select: false, small: false, source: true, span: false, strong: false, style: false, sub: false, summary: false, sup: false, table: false, tbody: false, td: false, textarea: false, // NOTE: Injected, see `ReactDOMTextarea`. tfoot: false, th: false, thead: false, time: false, title: false, tr: false, track: true, u: false, ul: false, 'var': false, video: false, wbr: true, // SVG circle: false, defs: false, ellipse: false, g: false, line: false, linearGradient: false, mask: false, path: false, pattern: false, polygon: false, polyline: false, radialGradient: false, rect: false, stop: false, svg: false, text: false, tspan: false }, createDOMComponentClass);
這段代碼把支持HTML標籤建立映射到` reactdomcomponent `類。這裏面的代碼邏輯後期再詳說。
React從最初設計開始就打破了傳統觀念,運用新的獨立方式進行頁面的交互操做,這是獨特創新,不知道這樣的方式會成爲將來前端技術的趨勢嗎?看實踐的結果了。
繼續激情的前進着。。。