學習 React Native 2

擴展虛擬的文檔對象模型

 

虛擬文檔對象模型當然是在性能方面有優勢，但他真正的潛力是在他的抽象對象能力。他能夠在開發者代碼之間以及真正的渲染層放置一個干凈的抽象層，從而給這個結構增加了很多有趣的可能性了。如果React 能夠直接對著目標進行渲染，而不是針對瀏覽器的文檔對象模型那會怎樣？ 為什么React的使用要只限制在瀏覽器里？畢竟 React,已經是真正的“明白”您的應用界面看起來應該是什么樣子的。 那么我們一定可以找到其它替代的方式，把那些想象中的 HTML 元素真正展現出來。

 

在 React 公布之后的前兩年，一些旁觀者注意到實現該方法的可能性了。 比方Netflix, 他修改了React，使其可以在其它很多不同的平臺對頁面元素進行渲染，包括電話以及DVD 播放機。 Flipboard 也曾經展示過如何渲染React 為HTML的 <canvas>元素。接著，在2015年1月的 React 大會上， Facebook  宣布了一個新的庫，React Native, 包括了 iOS以及 android平臺一起，允許 React能象原生程序般的渲染移動平臺。

 

又碰到這個詞：原生。 那原生程序一般的渲染是什么意思？對于網頁版的 React,  那意味著會渲染成為瀏覽器本身的文件對象模型。對于 原生版的 React，原生渲染則意味著 React 會使用創造視圖的原生 API 進行渲染。

 

只所以可以這樣完全是因為“橋”的功勞， 他可以讓React 和主機平臺的原生界面元素直接做對應。 React 組件從他的渲染函數里返回一個標識， 該標識可以指導 React 如何進行渲染。 對于網頁版的React, 這個轉化的工作是直接針對瀏覽器的文檔對象模型；對于原生版 React, 該標識被轉化成適合主機平臺顯示的樣子，因為一個<view/>標識就可能顯示 iOS 指定的 UIView 的樣子。

 

盡管 Flipboad以及 NetFlix 的項目都不隸屬于 React 原生版項目，但他們實現的基本思路是一樣的。 Flipbaod 的本質就是在 React和 HTML5 的 <canvas> 元素之間建立一個橋， 而對于 NetFlix 項目則是在React 到幾百種不同的智能電視，以及DVD 播放器之間建立很多的橋，諸如此類。 虛擬的文檔對象模型賦予了React 靈活性，自由在不同的渲染邏輯方式中切換，只要橋能夠被構造， React 在理論上就可以渲染任何虛擬的平臺。 React 0.14版本將庫文件分成了兩個不同的包：react 以及react-dom, 進一步強化了React 的核心是無需依賴任何指定平臺的渲染邏輯的。（你可以在這個相關的博客里了解更多的內容）

 

“原生”的含義

 

React Native 實際是使用主機平臺的標準渲染 API來工作的，這種方式使得他能支持大多數已經存大的跨平臺開發的方法。當前很多的框架支持使用 javascript, Html 以及 CSS 的組合來寫移動應用程序。 這些方法是可行，但這樣是一種后退，特別是談到性能之時。另外，他們通常不會使用主機平臺的原生界面元素集合。當這些框架試著去仿造原生的界面元素時，最終顯示的結果感覺會有點奇怪； 反轉引擎和針對動畫的精細細節調整，會占用大量的資源。

 

相反，原生版的 React 實際上將程序的所有標識轉為真的，原生的界面元素， 這就改進了當前的渲染視圖的方式，無論您是什么平臺上做開發。用這種方法，不需要反轉引擎動畫機制，或者是動畫設計里的精細細節調節，因為React 本來就使用的是已經存在的平臺的API.  同時，React 是和主用戶界面工作分離的，所以您的應用程序無須犧牲功能來維持應用的高性能。 React Native 的更新周期和 React 是一樣的：當props或者state 變化了， React Native 就會再次渲染視圖。 兩者最主要的區別是針對的瀏覽器的平臺： React Native 是根據宿主平臺的 UI庫進行渲染，而不是象React般使用 HTML 以及CSS 標識。

 

使用原生方法最直接的結果就是您可以使用 React 和 JavaScript 創建應用，而無須使用以前那些傳統方式。 2015年3月，iOS版的 React Native  就已經正式開源了，Android版有望在年未前發布（事實上當前已經發布）。 任何開發團隊都可以在已經存在的宿主平臺和React 之間創造自己的橋，同時也可以對其它的很多平臺提供支持，所以讓我們拭目以待，原生的下一步會向哪里發展？

 

對于那些已經很熟悉使用 React 做網站開發的程序員來說，這意味著您可以利用現在的技能，就可以在您已經熟悉比較喜愛的工具上，寫出高性能的，外觀和原生基本無差的移動應用了。這種方式已經深深的影響到了我們對跨平臺應用的開發，協議以及代碼復用的思考了。

不深思則不能造于道。不深思而得者，其得易失。

名人名言- 曾國藩

• By 優聯實達
• 2015-11-13
• 1788
• 公司新聞，網站開發，網站設計，UI