近日，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或者查看其 官網 吧！?
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
