視頻監控系統之React Native 與原生混合 APP開(一)

一、文獻綜述

（一）app開發發展及不同app開發方式的比較

這幾年，移動互聯網飛速發展，智能手機成為人們生活中的一部分，在軟件開發領域，早已完成從PC端到移動端的轉移。

早在2007年，蘋果公司推出第一代iphone手機，谷歌的安卓系統也在這一年正式發布，這些事情標志著移動互聯網開始走上歷史舞臺，而開發兩大系統上的應用軟件也開始受到重視。為了更好的幫助開發者開發app，蘋果公司在xcode上允許使用object-c語言開發原生應用，而安卓則可以在eclipse集成開發環境用java語言進行，即原生開發。

在智能手機大量普及的今天，原生開發最貼近操作系統，雖然運行效率高，但是其開發速度卻比較慢，開發人員較少，而web開發人員相對比較多。在此背景下，html5標準應運而生，ios和andriod都可以通過webView方式嵌入html5(以下簡稱h5)頁面，開發者只需嵌入即可。由此，移動開發進入第二個階段，web app階段。

1.1  h5與原生開發的比較

1.動畫方面

動畫有很多種，比如側邊欄菜單的滑入滑出、元素的響應動畫、頁面切換之間的過場等等，在H5之下的眾多實現方法都沒有辦法達到純原生的性能。一般這些的話有幾種不同的選擇：css3動畫，java script動畫，原生動畫

css3動畫非常的消耗性能，如果某一個元素用到css3動畫可能還看不出來，但大面積或過場使用css3動畫會讓app低端手機體驗非常差。最好的選擇一般是通過框架調用底層的動畫，但不管怎么樣等于在原來的代碼上包上了一層，性能還是不可避免的受到影響。

比如在一個新頁面的載入上，如果調用底層動畫要考慮的問題有兩個，一個是本身資源頁面的渲染問題，另一個是遠程數據的獲取。即便是這些動畫能夠很快的響應，但大量的css頁面會導致渲染卡頓，滑入時可能會有白屏/機器卡頓的現象。為了解決這些性能問題又必須要用到預加載或模擬動畫。即便是這樣，滑入滑出的動畫在低端的安卓機器上還是有很多問題，如果獲取服務端數據處理的方式不合適，卡頓白屏的現象會更嚴重。

2、獲取服務端數據方面

首先要接受的是，這里的數據獲取都是在資源頁面上異步完成的，因為只有這樣才能讓這些資源頁面完成預加載或者渲染。但是異步拿到的數據在填入頁面中時可能會涉及DOM操作，眾所周知，DOM操作非常消耗性能，如果頁面小還好，頁面稍大數據稍微復雜一點，頻繁的DOM操作會導致明顯的閃白。

而且最重要的一點是，如果頁面加載進來之后數據更新的速度太慢，也會讓頁面模板等待很長時間，對用戶體驗又不友好，移動端不能每次打開都像瀏覽器一樣等待刷新，這個問題如果沒有得到解決，H5 APP是很難承擔大規模數據的頁面，在它們之中頻繁切換更是難上加難，那么肯定有人也會想到用MVVM的方式，其實基于MVVM的H5APP，相對來說它們獲取數據和更新數據的方式更敏捷更科學，但寫的過程中又要注意很多H5獨有的問題 。

    3、頁面切換

上面我們看到了幾種不錯的實現方式，比如預加載和模擬動畫，甚至有批量的預加載，批量的截圖模擬動畫等等，雖然看起來很友好解決了不少問題，但事實上如果頁面足夠多就會引發另一個問題——頁面的生存周期。

試想一下，如果引導頁或者主頁面緩存了5個子頁面的資源，在跳轉到響應的子頁面時又會緩存這些子頁面的下級頁面資源，如此反復肯定會占據大量內存使APP的體驗下降。那么怎么知道那些頁面是需要的，最多緩存多少頁面，什么時候結束哪些頁面的生存周期呢？在我用過的很多H5 APP的框架里都沒有對這些問題有一個完美的解答，因此在頁面較多內容較多的APP中可能會因這些資源分配的問題降低性能。

這時候我們回過頭來再看看MVVM的數據加載問題，實際上不管哪個MVVM框架，寫過的人都知道管理這種新型的前端代碼最重要的問題是內存的問題，你既要保證代碼寫的足夠優雅沒有任何內存泄露問題，也要考慮到在頁面生存周期結束時它們的控制器/頁面資源是否得到釋放，這對全局有沒有什么影響，在多個請求時也要合理的分配資源，甚至是復用這些父級頁面傳過來的緩存資源等等。較小的APP可能并不會有這些問題，如果你想用純H5來開發大型APP，這很可能會浪費你很多時間——而且結果還不會讓你滿意。

由于web app有以上許多缺點，很多大公司開始拋棄，轉而尋求一種新的方式來實現跨平臺且快速開發app的方式，美國著名的Facebook公司在2014年創造了app開發的新方式，即React Native。隨著，React Native的大熱，移動開發也進入了新的階段，即第三階段，React Native階段。

（二） React Native的特點

React Native 的 iOS 和 Android 版本目前是由官方在維護，Windows 版本是微軟做了遷移，淘寶有把 React Native 移植到 Web 上，另外還有工程師已經把它移植到了 OS X 上了。所以在將來如果會 React Native，就會很容易成為一個全端工程師。

React Native 用的是 ReactJS 語法。其他的跨平臺方案一般是先編譯成中間碼再在虛擬機中運行，例如 Java 和 .Net ，React Native 卻不太一樣，因為跨平臺是非常難的，平臺視圖會有很大差異。React Native 的思路是讓我們學習這種開發模式后可以用這套模式去開發任何平臺的應用，即所謂的 「learn once ,write anywhere」。但是開發的代碼會稍微有些不同，例如在 Web 端會寫一些 HTML 的 Tag ，在 React Native 中則會寫一些抽象出來的原生組件的 Tag 。