ReactNative 概述
近期看了下React Native ,整理了下
簡介
- 支持平臺:Native App(IOS、Android)
- 開發語言:JSX、JavaScript、Coffee Script、Type Script
- IDE:Nuclide </ul>
- 非死book Groups IOS
- 非死book Ads Manager
- F8 </ul>
-
通過使用React Native,開發者能夠使用iOS環境下的標準組件(如UITabBar和UINavigationController)來開發原生應用,這就能夠保證開發出來的應用在多個平臺亦能保持始終如一的外觀、風格,從而提高了應用產品的用戶體驗和品質;
</blockquote> </li>JavaScript應用代碼和原生平臺之間的所有操作都是異步執行的,原生模塊還可以使用額外的線程,從而利用React Native開發出來的應用性能比較高(運行流暢和反應快)。此外,開發者還能夠在模擬器或者物理設備上運行應用的同時利用Chrome Developer Tools調試JavaScript代碼;
</blockquote> </li>React Native實現了一個類似iOS平臺下的響應系統,還提供了高級的組件如TouchableHighlight等;
</blockquote> </li>Flexbox布局模型有利于構建常見的UI布局,如stacked和nested boxes布局。React Native還支持常見的Web樣式,如fontWeight、font-size等。樣式表(StyleSheet)抽象提供了一種優化機制來聲明組件所用到的所有樣式和布局;
</blockquote> </li>Polyfills功能是的開發者編寫單獨應用的代碼而不用擔心其他瀏覽器原生是不是支持。React Native專注于改變試圖(Views)代碼編寫的方式,開發者能夠使用npm安裝JavaScript Library,并將這些Library融入React Native,如 XMLHttpRequest、window.requestAnimationFrame等
</blockquote> </li>設計React Native主要是為了使得開發者使用常規的原生視圖組件擴展和模塊就可以開發出一個完整的應用,開發者能夠復用已經構建的任何應用或者組件,并且還能夠引入自己喜愛的原生Library。
</blockquote> </li> </ul>
ReactNative 組件運行原理
React Native 繼承了 React.js 的虛擬 DOM 的思想,只不過這次變成了虛擬 View。事實上這個框架提供了一組 native 實現的 view (在 iOS 平臺上是 RCT 開頭的一系列類)。我們在寫 JavaScript (更準確地說,對于 React Native,我們寫的是帶有 XML 的 JavaScript:JSX) 時,通過將虛擬 View 添加并綁定到注冊的模塊中,在 native 側用 JavaScript 運行環境 (對于 iOS 來說也就是 JavaScriptCore) 執行編譯并注入好的 JavaScript 代碼,獲取其對 UI 的調用,將其截取并橋接到 native 代碼中進行對應部件的渲染。而在布局方面,依然是通過 CSS 來實現的。
</blockquote>
態度
- 如何評價React Native(知乎)
- How does ReactJS Native compare with Titanium?(Quora)
- ReactNative in Twittter(Twrtter) </ul>
- JS、XML 標簽、類似CSS 樣式、后臺線程、橋接映射 </p>
不同點:
- Titanium 時間比較長、已有很多人趟坑、
- 異步線程、UI更新的批量處理效率較高 </p>
項目實戰:
Hybrid APP
WebView app:
Adobe PhoneGap、Apache Cordova、AppCan、Trigger.io、IBM Worklight
相關應用:
- PhoneGap: Untappd、TripCase、Yoga+Travel
- AppCan: 求是網、富國富錢袋、雞毛箭商城 </p>
優點:
- 全Web開發,減少開發人力成本;
- 統一UI交互
- 動態更新 </p>
致命缺點:
- 緩慢的渲染速度和難以駕馭的動畫效果 </p>
項目實戰:
Compiled hybrid app
Titanium (JS)、Xamarin(C#)、RubyMotion(Ruby)、RoBoVM(Java)
相關應用:
- Titanium: 奇妙清單、Homes.com、ZipCar、、
- Xamarin: Rdio、Sqor Sports、RESAAS、、
- RubyMotion: Frontback、Jukely、Jimdo、、
- RoboVM:Offroad Kings、Wings of Rage </p>
優點:
- 一種語言(JS、C#、Ruby、Java)支持所有平臺(Native)
- 性能比較好 >>> PhoneGap </p>
缺點:
- 開發受平臺限制,新的API,必須要等到平臺支持
- 維護成本巨高、取決于開源社區、、 </p>
實戰項目:
- Build A Application in Titanium(Titanium)
- MoviesDemo in Github(Titanium)
- RubyMotion Samples (RubyMotion)
Native + WebView
- APICloud
- 微信、QQ、支付寶
優點:
- 最穩定的Hybrid App開發方式,交互層的效率上由Native的東西解決了,而且架構上基本就是在App內寫網頁,連App Store都是采用了該種方案;
- 開發時分工非常明確,底層的由iOS開發人員處理,上層的由Web前端開發人員處理;
- 有效的在線參數配置方式,以便于及時在線替換界面; </p>
缺點:
- 團隊至少需要三個工程師,一個是Web的,一個是iOS、Android的
- 運行效率的權衡權衡,多少界面采用Web來渲染,畢竟WebView的效率會相對降低 </p>
態度:
- 王巍:跨平臺開發時代的 (再次) 到來?
- 李秉駿:Hybrid App開發實戰 </p> </div> 來自:http://blog.csdn.net/skymingst/article/details/44968143
ReactNative VS Titanium
相同點:
此外,非死book還開源了對應的IDE(Nuclide)。Nuclide具有能夠開發基于Hack的Web應用、支持React和React Native開發、集成了構建工具Buck、集成了JavaScriot類型檢查器Flow等特征
</blockquote>上線APP
主要特性