视频监控系统之React Native 与原生混合 APP开(一)

本论文在计算机毕业论文栏目，由论文格式网整理,转载请注明来源www.lwgsw.com,更多论文,请点论文格式范文查看

一、文献综述

（一）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 。

首页上一页 1 2 下一页尾页 1/2/2


上一篇：云环境下企业节能信息系统的规划..	下一篇：基于java的学生信息管理系统设计..

Tags：视频监控系统 React Native 原生混合 APP

【收藏】【返回顶部】