近日,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元等您想捐的金額吧,狠狠點擊下面給點支持吧,站長非常感激您!手機微信長按不能支付解決辦法:請將微信支付二維碼保存到相冊,切換到微信,然后點擊微信右上角掃一掃功能,選擇支付二維碼完成支付。
【本文對您有幫助就好】元
