近日，facebook將其用戶界面構(gòu)建Javascript庫React開源發(fā)布。
- 等等……什么叫用戶界面 構(gòu)建 庫（ a library for building user interfaces ）？
顧名思義，當(dāng)然就是該庫是將特定規(guī)范的源代碼（JSX），構(gòu)建成新的代碼（Javascript）。
- 為什么我們需要這么做呢？
我們覺得寫CSS太麻煩了，太多重復(fù)工作了，所以我們使用LESS來代替他，讓機器代替我們做這些事情。但是出于性能的需求，現(xiàn)在并不流行加載一個less.js讓其動態(tài)處理這些LESS代碼，而是轉(zhuǎn)為先由LESS文件構(gòu)建成靜態(tài)的CSS文件，再使用，就像Bootstrap一樣。
OK，回到React，我們發(fā)現(xiàn)Javaascript模板雖然能動態(tài)的生成我們想要的東東，但是實際上對性能并不友善，所以我們尋求一種方法讓其構(gòu)建成靜態(tài)的，然后再使用。
當(dāng)然，React不僅僅做了這些，下面讓我們一起來認(rèn)識React吧！
?
簡單的例子——Hello World
首先，我們點擊下面鏈接下載其Starter Kit。
然后在其根目錄下創(chuàng)建一個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(
//
這是什么不是字符串，不是數(shù)字，又不是變量的參數(shù)……WTF
<h1>Hello, world!</h1>,
document.getElementById('example'
)
);
因為這個script標(biāo)簽的type為
?
type="text/jsx"?
所以實際上，這里面的代碼并沒有運行……
這里面的奧秘在于該HTML引用了JSXTransformer.js和react.min.js。首先，JSXTransformer.js將所有text/jsx類型的script當(dāng)成字符串讀取出來，再分析其代碼，轉(zhuǎn)換成適用于react.min.js的UI模塊。
?可見這樣效率當(dāng)然是很低的，但是React提供了另一種方法，不用說，就是本地構(gòu)建成靜態(tài)代碼。通過npm我們可以安裝react-tools：
npm install -g react-tools
于是我們就可以用react-tools的watch命令來監(jiān)控目錄變化并進(jìn)行構(gòu)建：
jsx --watch src/ build/
所以實際項目上的代碼應(yīng)當(dāng)是這樣的：
<!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>
?我們看看經(jīng)過構(gòu)建后helloworld.js變成怎么樣了：
/*
* @jsx React.DOM
*/
React.renderComponent(
React.DOM.h1(
null
, 'Hello, world!'
),
document.getElementyById(
'example'
)
);
這里有一個值得學(xué)習(xí)的地方，就是React在對DOM插入時候做的性能優(yōu)化。 JavaScript Micro-Templating 一般是使用innerHTML進(jìn)行插入操作的，但是React并非如此，其靜態(tài)生成的代碼是使用Document?Fragment的方法插入的。這里有一個性能測試，可以看出這兩者的性能差別：
http://jsperf.com/innertext-vs-fragment
我們可以看見使用Document Fragment的性能是優(yōu)于innerHTML的，作為Facebook的類似模板解決方案，其對性能有更強的要求。
?
下一步？
如果想更進(jìn)一步了解React，那么請查看Starter Kit中的examples或者查看其 官網(wǎng) 吧！?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
