zoukankan      html  css  js  c++  java
  • 探索ReactNative应用

    本篇文章是我看AC2016腾讯前端技术交流大会后写的。写的不好,大家见谅啊。

    一,什么是ReactNative?

      简单来说就是可以用javascript来写APP了,而且性能还不错。 用JS写的话已经有很多框架比如Cordova,Dcloud等等那为什么这些框架不行呢?主要还是因为它们是基于webview来做的,导致它们的性能不行。
      React.js Conf 2015会议上,Facebook发布了React Native,可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。
      它是一种介于在webview和原生开发之间的解决方案,它想要实现像web一样灵活,像原生一样的性能,虽然现在还都没有达到,但是它是一种有可能接近这个目标的解决方案。

    二,ReactNative有那些优点

    ①通过JS来编写移动应用,学习成本低
    ②真native,丝般顺滑(性能好)
    这里写图片描述
    ③支持热更新
      可以方便的进行代码热更新。
    ④Chrome调试
    ⑤React生态圈,组件化
      组件化开发,复用率高,组件丰富以后,ui开发较快,前端式开发。
    ⑥可以和原生页面互相调用,作为一部分嵌入到一个已有的原生app中。
    ⑦learn once,write anywhere
      未来js可能会有更大的通用性,比如现在微信小程序的开发技术和react native十分相似。现在还有用react native开发mac桌面应用,开发web网页

    三,ReactNative的存在方式

    这里写图片描述
    Native初始化->JS初始化->抓取数据->渲染
    这里写图片描述
    前两个是针对native端进行的,所以我们后面的优化也可以分开进行

    四,ReactNative应用优化

    (1)Native端优化
    ReactNative应用会有一个JS Bundle而Native没有,这会产生什么问题呢?
    写一个几乎什么都没有的页面JS Bundle都有500K,这产生什么问题?
    这里写图片描述
    ReactView启动流程(看不懂请忽略)
    这里写图片描述
    两个优化方向:
    ①减小jsbundle的装载时间
    这里写图片描述
    优化结果:700ms到60ms几乎个原生APP体验一样
    ②减小jsbundle的更新体积
    这里写图片描述
    这里写图片描述
    将base这一部分提前下载到用户手机上去
    这里写图片描述
    这里写图片描述
    (1)JS端优化
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述
    这里写图片描述

  • 相关阅读:
    javaBean为什么要实现Serializable接口?
    OpenLayers3的WMS空间查询实现多个图层
    (WPS) 网络地理信息处理服务
    window.open跳过浏览器拦截
    linux改权限
    element-ui MessageBox的bug
    element-ui上传文件带token
    MySQL启动出现The server quit without updating PID file错误解决办法
    重装应用商店
    vscode在vue-cli中按照ESlint自动格式化代码
  • 原文地址:https://www.cnblogs.com/snailclimb/p/9086502.html
Copyright © 2011-2022 走看看