近日，facebook將其用戶界面構建Javascript庫React開源發布。
- 等等……什么叫用戶界面構建庫（a library for building user interfaces）？
顧名思義，當然就是該庫是將特定規范的源代碼（JSX），構建成新的代碼（Javascript）。
- 為什么我們需要這么做呢？
我們覺得寫CSS太麻煩了，太多重復工作了，所以我們使用LESS來代替他，讓機器代替我們做這些事情。但是出於性能的需求，現在並不流行加載一個less.js讓其動態處理這些LESS代碼，而是轉為先由LESS文件構建成靜態的CSS文件，再使用，就像Bootstrap一樣。
OK，回到React，我們發現Javaascript模板雖然能動態的生成我們想要的東東，但是實際上對性能並不友善，所以我們尋求一種方法讓其構建成靜態的，然后再使用。
當然，React不僅僅做了這些，下面讓我們一起來認識React吧！
簡單的例子——Hello World
首先，我們點擊下面鏈接下載其Starter Kit。
然后在其根目錄下創建一個HTML文件helloworld.html，鍵入以下代碼：
<!DOCTYPE html>
<html>
<head>
<script src="build/react.min.js"></script>
<script src="build/JSXTransformer.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/jsx">
/** @jsx React.DOM */
React.renderComponent(
<h1>Hello, world!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
什么，這是什么代碼，為什么能這么寫？
/** @jsx React.DOM */ React.renderComponent( // 這是什么不是字符串，不是數字，又不是變量的參數……WTF <h1>Hello, world!</h1>, document.getElementById('example') );
因為這個script標簽的type為
type="text/jsx"
所以實際上，這里面的代碼並沒有運行……
這里面的奧秘在於該HTML引用了JSXTransformer.js和react.min.js。首先，JSXTransformer.js將所有text/jsx類型的script當成字符串讀取出來，再分析其代碼，轉換成適用於react.min.js的UI模塊。
可見這樣效率當然是很低的，但是React提供了另一種方法，不用說，就是本地構建成靜態代碼。通過npm我們可以安裝react-tools：
npm install -g react-tools
於是我們就可以用react-tools的watch命令來監控目錄變化並進行構建：
jsx --watch src/ build/
所以實際項目上的代碼應當是這樣的：
<!DOCTYPE html>
<html>
<head>
<title>Hello React!</title>
<script src="build/react.min.js"></script>
<!-- 不需要 JSXTransformer! -->
</head>
<body>
<div id="example"></div>
<script src="build/helloworld.js"></script>
</body>
</html>
我們看看經過構建后helloworld.js變成怎么樣了：
/** @jsx React.DOM */ React.renderComponent( React.DOM.h1(null, 'Hello, world!'), document.getElementyById('example') );
這里有一個值得學習的地方，就是React在對DOM插入時候做的性能優化。JavaScript Micro-Templating一般是使用innerHTML進行插入操作的，但是React並非如此，其靜態生成的代碼是使用Document Fragment的方法插入的。這里有一個性能測試，可以看出這兩者的性能差別：
http://jsperf.com/innertext-vs-fragment
我們可以看見使用Document Fragment的性能是優於innerHTML的，作為Facebook的類似模板解決方案，其對性能有更強的要求。
下一步？
如果想更進一步了解React，那么請查看Starter Kit中的examples或者查看其官網吧！