標籤：
最近最火的前端UI架構非React莫屬了。趕緊找時間瞭解一下。
項目地址：http://facebook.github.io/react/
官方的介紹：A JavaScript library for building user interfaces （前端UI的js架構）
具有三個特點：
Just the UILots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it‘s easy to try it out on a small feature in an existing project. (一般人們將React用於實現前端MVC中的view中，因為React並不假定你使用的其它前端技術堆棧，所以很容易在已經存在的項目中試用。)
Virtual DOMReact abstracts away the DOM from you, giving a simpler programming model and better performance. React can also render on the server using Node, and it can power native apps using React Native. (使用React我們並不直接操作瀏覽器中的DOM，React引入了虛擬DOM的概念，我們使用js代碼直接產生虛擬DOM節點，然後React負責將虛擬DOM節點到實際DOM節點的轉換，這樣的話，是前端UI編程更加的簡單而言效能更好。)
Data flowReact implements one-way reactive data flow which reduces boilerplate and is easier to reason about than traditional data binding.(React實現單向的資料流，從而減少了傳統資料繫結的模板檔案，而且更加容易理解)
其實我自己的理解是：React是一個將前端UI組件化的架構，它可以將頁面上的各種UI實現為一個一個的組件，我們向組件傳入資料，React負責產生對應的UI，然後進行渲染。實現方式是虛擬DOM和單向資料流，虛擬DOM提供了更好的效能，因為比如一個UI組件包含多個html標籤元素，如果我們需要修改其中的幾個標籤中的資料的話，就會對DOM操作幾次(比如使用jquey)，然而使用虛擬DOM，我們是先在記憶體中產生整個UI組件，然後一次性將虛擬DOM轉換渲染到實際DOM，所以對實際DOM的操作只有一次。單向資料流是指沒有資料的雙向繫結，資料只從Model向View傳送，每次更新都是使用一個全新的UI組件替換頁面上舊的UI組件，更加的簡單。
其實React最大特點是：UI組件化和UI整體替換的更新方式，然後才是效能更好，更加簡單。組件化就容易維護，方便重用。
執行個體：
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="build/react.js"></script><script src="build/JSXTransformer.js"></script></head><body> <div id="example"></div> <script type="text/jsx">React.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘));</script></body></html>
上面代碼匯入React的js庫react.js，而JSXTransformer.js是將頁面上 type="text/jsx" 的代碼轉換成 text/javascript 代碼的轉換庫。轉換可以再瀏覽器端進行，也可以使用Nodejs再服務端進行。實際項目運行都是在服務端進行轉換。我們先看下在瀏覽器端進行轉換的效果：
可以看到React成功渲染出了一個UI組件，但是下面提示我們應該先在服務端先行編譯 jsx 腳步。
然後我們再看服務端轉換先行編譯 jsx 方法：
安裝Node.js：到 https://nodejs.org/ 下載對應平台的安裝檔案：node-v0.12.2-x86.msi
我是win7 64位，雙擊一路下一步安裝完成。配置系統路徑，將 D:\nodejs 加入 path, 建立系統變數：NODE_PATH，值為：D:\nodejs\node_modules\
安裝 react-tools: npm install react-tools
安裝成功如：
再先行編譯 jsx 腳步之前，我們將它提取出來，單獨放入一個檔案：helloworld.js
React.render( <h1>Hello, world!</h1>, document.getElementById(‘example‘));
然後調用react-tool中的 jsx 腳步來編譯：
上面講 目前的目錄下的 jsxfile 檔案夾中的所有的 jsx 腳步編譯到 當前目前下的 result 檔案夾下，編譯之後的代碼為：
React.render( React.createElement("h1", null, "Hello, world!"), document.getElementById(‘example‘));
React.createElement("h1", null, "Hello, world!") 表示生產一個 h1 標籤，內容為 "Hello, world!"，然後React.render()，將生產的h1標籤渲染插入到document.getElementById(‘example‘)節點下去。最後的helloworld.html的內容為：
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="build/react.js"></script></head><body> <div id="example"></div><script type="text/javascript">React.render( React.createElement(‘h1‘, null, ‘Hello, world!‘), document.getElementById(‘example‘) // $("#example")[0]);</script></body></html>
注意這裡我們將 JSXTransformer.js 檔案去掉了，並且將 text/jsx 改成了 text/javascript. 當然我們也可以將編譯生產的js單獨放入一個檔案，然後使用 <script type="text/javascript" src="xxx"> 引入到頁面。
效果為：
未完待續...
facebook開源前段UI架構React初探
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
