ReactNative运行的两种方式比较与分析

作者: shaneZhang 分类: 互联网技术 发布时间: 2015-12-31 15:09

react native它本身支持两种方式的运行,一种是利用node服务在线请求网络进行解析展现,另一种是利用本地运行包进行展现。

下面来解析一下两种方式的优缺点:

  • 利用node服务在线生成界面展示包。

  /**
   * Loading JavaScript code - uncomment the one you want.
   *
   * OPTION 1
   * Load from development server. Start the server from the repository root:
   *
   * $ npm start
   *
   * To run on device, change `localhost` to the IP address of your computer
   * (you can get this by typing `ifconfig` into the terminal and selecting the
   * `inet` value under `en0:`) and make sure your computer and iOS device are
   * on the same Wi-Fi network.
   */
  jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/Examples/Movies/MoviesApp.ios.bundle?platform=ios&dev=true"];

这种方式的优点: 灵活性高,客户端只需要引入框架请求特定的url即可,后续修改只在后端做必要变更即可
缺点:对网络依赖性比较高 首次加载比较缓慢 对用户体验不好

  • 利用本地运行包进行运行展现

利用本地运行包进行支持转换,需要在安装包中预置一个js包,后续维护需要从网络中加载再进行展现


  /**
   * OPTION 2
   * Load from pre-bundled file on disk. To re-generate the static bundle, `cd`
   * to your Xcode project folder in the terminal, and run
   *
   * $ curl 'http://localhost:8081/Examples/Movies/MoviesApp.ios.bundle?platform=ios&dev=true' -o main.jsbundle
   *
   * then add the `main.jsbundle` file to your project and uncomment this line:
   */

 jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

此种方式的优点:界面灵活展现性高 用户体验好
缺点: 用户本地更新不及时有一个网络加载的过程,服务端更新不能及时获取

  • 解决方案

其实这个在当前的一些企业中已经有一部分大量运用了,就是采用推拉结合的方式来进行数据加载和展现。

比如手机淘宝利用一套高可用架构方案,从而实现上述两种方案的完美结合。

有关资料可以参见Native和Web融合架构实践

本页面支持繁体中文友好显示:ReactNative运行的两种方式比较与分析

如果觉得我的文章对您有用,请随意打赏。如果有其他问题请联系博主QQ(909491009)或者下方留言!

发表回复